<template>
    <div class="tree_box">
      <el-scrollbar height="450">
        <el-tree
          :allow-drop="allowDrop"
          @node-drop="sendDrop"
          :allow-drag="allowDrag"
          :data="dragDataXM"
          draggable
          :expand-on-click-node="false"
          default-expand-all
          @node-click="clickTreeNode"
          node-key="id"
        >
          <template #default="{ node, data }">
            <div
              :class="data.type == 'parent' ? 'parentNodes' : ''"
              class="custom-tree-node_s"
            >
              <div v-if="data.type == 'parent' && !inputShow">
                {{ node.label }}
              </div>
              <div
                v-if="
                  data.type == 'parent' && inputShow && node.label == data.label
                "
              >
                <el-input
                  v-if="data.id == input_Data"
                  v-model="data.label"
                  size="small"
                ></el-input>
                <div v-if="data.id !== input_Data">{{ node.label }}</div>
              </div>
              <div
                class="childrenNode"
                style="
                  width: 250px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
                v-if="data.type !== 'parent'"
              >
                <!-- <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="node.label"
                  placement="top-start"
                >
                  <div>
                    <span style="color: #0081ff">{{ data.projectCode }}</span>
                    -
                    <span> {{ node.label }}</span>
                  </div>
                </el-tooltip> -->
                <div>
                    <span style="color: #0081ff">{{ data.projectCode }}</span>
                    -
                    <span> {{ node.label }}</span>
                  </div> 
  
              </div>
              <div v-if="data.type == 'parent'">
                <el-button
                  v-if="!inputShow"
                  class="button_show2 add_button"
                  link
                  type="primary"
                  style="margin-left: 8px"
                  @click="changeD(node, data)"
                  ><el-icon><EditPen /></el-icon> 修改分组名
                </el-button>
  
                <el-button
                  v-if="inputShow"
                  class="button_show2 add_button"
                  link
                  type="primary"
                  style="margin-left: 8px"
                  @click="changeD2(node, data)"
                >
                  确定
                </el-button>
  
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除分组名称"
                  placement="top-start"
                >
                  <el-button
                    class="button_show add_button"
                    link
                    type="primary"
                    style="margin-left: 8px"
                    @click="removeD(node, data)"
                  >
                    <el-icon><Delete /></el-icon>删除
                  </el-button>
                </el-tooltip>
              </div>
            </div>
          </template>
        </el-tree>
      </el-scrollbar>
      <div class="oversa"></div>
      <div class="oversa2"></div>
    </div>
  
    <div class="app-container">
      <div id="map"></div>
  
      <div class="top_button">
        <div class="box_items">
          <el-button @click="getDataS('项目分布')" size="large" circle>
            <template #icon>
              <i class="icon iconfont icon-huagongchang"></i>
            </template>
          </el-button>
          <span>项目分布
            
          </span>
        </div>
  
        <div v-if="UserShow" class="box_items">
          <el-button @click="getDataS('人员分布')" size="large" circle>
            <template #icon>
              <i class="icon iconfont icon-yuangongliebiao"></i>
            </template>
          </el-button>
          <span>人员分布</span>
        </div>
  
        <div v-if="false" class="box_items">
          <el-button @click="getDataS('供应商分布')" size="large" circle>
            <template #icon>
              <i class="icon iconfont icon-gongyingshangguanli_icox"></i>
            </template>
          </el-button>
          <span>供应商分布</span>
        </div>
  
        <div
          v-if="false"
          class="box_items"
        >
          <el-button @click="getDataS('待办事项')" size="large" circle>
            <template #icon>
              <i class="icon iconfont icon-daibanrenwu_o"></i>
            </template>
          </el-button>
          <span>待办事项</span>
  
          <div class="res_cricle"></div>
        </div>
      </div>
  
      <div @click="goBackMap" class="bottom_back_button">浏览全国</div>
    </div>
  
    <!-- 如果要拖动 变量改为 xm_Dragg -->
    <vue3ResizeDrag
      v-if="xzfb_div"
      :isDraggable="false"
      :w="350"
      :y="22"
      :x="activeRight"
      :zIndex="99"
    >
      <div class="vue3-resize-drag22">项目分布</div>
      <div class="xm_fb">
        <div class="button_constion">
          <el-button @click="YMWHShowFn" type="primary" plain round size="small"
            >项目维护</el-button
          >
        </div>
        <div class="white_color item_1 height223">
          <!-- <img class="img_ls" src="../assets/image/pic4.png" alt="" /> -->
          <Echart id="XMFB" :data="XMFBData"></Echart>
        </div>
  
        <div style="margin-top: 10px" class="boder_show_custor">
          <!-- <div style="margin-bottom: 10px" class="search_input_s">
            <el-input
              ref="projectInput"
              v-model="projectName"
              placeholder="请输入项目名称"
            />
          </div> -->
  
          <div
            style="
              background: white;
              padding-bottom: 5px;
              padding-left: 5px;
              font-size: 14px;
            "
            class="addClass_ground"
          >
            <el-popover
              ref="popoverRefc"
              placement="bottom"
              title="添加分组名"
              :width="200"
              trigger="click"
            >
              <template #reference>
                <el-button link class="add_button" size="small"
                  ><el-icon><CirclePlus /></el-icon> 添加分组名
                </el-button>
              </template>
              <template #default>
                <el-input
                  size="small"
                  placeholder="输入分组名"
                  v-model="FZName"
                ></el-input>
  
                <div
                  style="
                    margin-top: 8px;
                    display: flex;
                    flex-direction: row-reverse;
                  "
                >
                  <el-button type="primary" @click="appendD()" size="small"
                    >确定</el-button
                  >
                  <el-button
                    style="margin-right: 5px"
                    @click="canelD()"
                    size="small"
                    >取消</el-button
                  >
                </div>
              </template>
            </el-popover>
          </div>
          <div class="box_show"></div>
        </div>
  
        <div class="left_button_box">
          <div class="buttons">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="人员"
              placement="left"
            >
              <el-button @click="showRY" size="large" circle>
                <template #icon>
                  <i class="icon iconfont icon-yuangongliebiao"></i>
                </template>
              </el-button>
            </el-tooltip>
          </div>
          <div class="buttons">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="合同"
              placement="left"
            >
              <el-button @click="showHT" size="large" circle>
                <template #icon>
                  <i class="icon iconfont icon-hetongchaxun"></i>
                </template>
              </el-button>
            </el-tooltip>
          </div>
          <div class="buttons">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="返回"
              placement="left"
            >
              <el-button @click="showFH" size="large" circle>
                <template #icon>
                  <i class="icon iconfont icon-fanhui"></i>
                </template>
              </el-button>
            </el-tooltip>
          </div>
        </div>
      </div>
    </vue3ResizeDrag>
  
    <!-- 如果要拖动 变量改为 xm_Dragg -->
    <vue3ResizeDrag
      v-if="towPageDrag"
      :isDraggable="false"
      :w="350"
      :y="22"
      :x="activeRight"
      :zIndex="99"
    >
      <div class="vue3-resize-drag22">项目分布</div>
      <div class="xm_fb">
        <div class="white_color item_1 height223">
          <Echart id="XMFB2" :data="XMFBData"></Echart>
          <!-- <img class="img_ls" src="../assets/image/pic4.png" alt="" /> -->
        </div>
  
        <div style="margin-top: 10px">
          <div class="search_input_s">
            <!-- <el-input
              ref="projectInput"
              v-model="projectName"
              placeholder="请输入项目名称"
            /> -->
          </div>
          <el-scrollbar height="400">
            <div
              @click="rowClick(item)"
              :class="item.active ? 'border_color' : ''"
              v-for="(item, index) in projectMapAndData"
              :key="index"
              class="white_color item_2 boder_new_css"
            >
              <p class="title new_title">{{ item.projectName }}</p>
              <p class="address">
                <span class="new_adress">地址：</span>{{ item.address }}
              </p>
              <p class="manage new_manage">
                <span class="new_colors_my">项目经理：</span>
                <span>{{ item.manager }}</span>
                &nbsp;&nbsp;&nbsp;
                <span class="new_colors_my">采购经理：</span>
                <span>{{ item.manager }}</span>
              </p>
              <p class="manage">
                <span class="new_colors_my">采购总人力：</span>
                <span>{{ item.totalInput }}</span>
                &nbsp;&nbsp;&nbsp;
                <span class="new_colors_my">正式：</span>
                <span>{{ item.formalMan }}</span>
                &nbsp;&nbsp;
                <span class="new_colors_my">外聘：</span>
                <span>{{ item.externalMan }}</span>
              </p>
  
              <div :style="getColor(item, 'background')" class="line_after"></div>
  
              <!-- <div :style="getBorderColor(item)" class="state_box">
                {{ item.state }}
              </div> -->
              <!-- <div :style="getBorderColor(item)" class="state_box_cir"></div> -->
            </div>
          </el-scrollbar>
        </div>
  
        <div class="left_button_box">
          <div class="buttons">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="人员"
              placement="left"
            >
              <el-button @click="showRY" size="large" circle>
                <template #icon>
                  <i class="icon iconfont icon-yuangongliebiao"></i>
                </template>
              </el-button>
            </el-tooltip>
          </div>
          <div class="buttons">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="合同"
              placement="left"
            >
              <el-button @click="showHT" size="large" circle>
                <template #icon>
                  <i class="icon iconfont icon-hetongchaxun"></i>
                </template>
              </el-button>
            </el-tooltip>
          </div>
          <div class="buttons">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="返回"
              placement="left"
            >
              <el-button @click="showFH" size="large" circle>
                <template #icon>
                  <i class="icon iconfont icon-fanhui"></i>
                </template>
              </el-button>
            </el-tooltip>
          </div>
        </div>
      </div>
    </vue3ResizeDrag>
  
    <!-- 如果要拖动 变量改为 xm_Dragg -->
    <vue3ResizeDrag
      v-if="RY_div"
      :isDraggable="false"
      :w="350"
      :y="22"
      :x="activeRight"
      :zIndex="99"
    >
      <div class="vue3-resize-drag22">人员信息</div>
  
      <div style="position: relative" class="xm_fb">
        <div v-if="isManager !== 0" class="button_constion">
          <el-button @click="RYSQShowFn" type="primary" plain round size="small"
            >人员申请</el-button
          >
        </div>
        <div class="tab_card">
          <div
            @click="click_RRR(item, tabCard)"
            v-for="(item, index) in tabCard"
            :class="item.checked ? 'active_class_item' : ''"
            :key="index"
            class="cartd_item"
          >
            <span v-if="item.title == '人员'"
              >&nbsp; <i class="icon iconfont icon-yuangongliebiao"></i
            ></span>
            <span v-if="item.title == '合同'"
              >&nbsp; <i class="icon iconfont icon-hetongchaxun"></i
            ></span>
            <span v-if="item.title == '返回'"
              >&nbsp; <i class="icon iconfont icon-fanhui"></i
            ></span>
            &nbsp;
            {{ item.title }}
          </div>
        </div>
        <div class="white_color item_1 height223">
          <Echart id="RYSQ" :data="RYSQData"></Echart>
          <!-- <img class="img_ls" src="../assets/image/pic2.png" alt="" /> -->
        </div>
  
        <div style="margin-top: 10px">
          <div class="search_input_s">
            <el-input
              ref="personInput"
              v-model="personName"
              placeholder="请输入人员名称"
            />
          </div>
          <el-scrollbar height="400">
            <div
              v-for="(item, index) in personData"
              :key="index"
              class="white_color item_2 flexsim_s"
            >
              <div class="img_box">
                <img :src="imgFn(item.icon)" alt="" />
              </div>
              <div style="width: 95%">
                <div class="manage223">
                  <div class="div1">
                    <span>姓名：</span>
                    <span>{{ item.name }}</span>
                  </div>
                  <div class="div2">
                    <span>职位：</span>
                    <span>{{ item.rank }}</span>
                  </div>
                </div>
                <div style="margin-top: 10px" class="manage223">
                  <div class="div1">
                    <span>状态：</span>
                    <span>{{ item.state }}</span>
                  </div>
                  <div class="div2">
                    <span>参与项目：</span>
                    <span>{{ item.projects }}个</span>
                  </div>
                </div>
                <div style="margin-top: 10px" class="manage223">
                  <div>
                    <span class="iphone_num_color">电话：</span>
                    <span>{{
                      item.phone == "\\" ? "暂无电话号码" : item.phone
                    }}</span>
                  </div>
                  <div style="position: relative" class="div2">
                    <div class="custion">
                      <el-switch
                        v-model="item.state"
                        class="ml-2"
                        size="small"
                        inline-prompt
                        style="
                          --el-switch-on-color: #0370ca;
                          --el-switch-off-color: #ccc;
                        "
                        active-value="在现场"
                        inactive-value="不在现场"
                        active-text="在现场"
                        inactive-text="不在现场"
                        @change="() => changeData(item.state, item)"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
  
          <!-- <div class="person_pagination">
            <el-pagination
              small="small"
              v-model:current-page="personPageNum"
              v-model:page-size="personPageSize"
              :page-sizes="[20, 30, 50]"
              background
              layout="pager "
              :total="personTotal"
              @size-change="personSizeChange"
              @current-change="personCurrentChange"
            />
          </div> -->
        </div>
  
        <div style="display: none" class="left_button_box showitem">
          <div class="buttons">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="人员"
              placement="left"
            >
              <el-button @click="showRY" size="large" circle>
                <template #icon>
                  <i class="icon iconfont icon-yuangongliebiao"></i>
                </template>
              </el-button>
            </el-tooltip>
          </div>
          <div class="buttons">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="合同"
              placement="left"
            >
              <el-button @click="showHT" size="large" circle>
                <template #icon>
                  <i class="icon iconfont icon-hetongchaxun"></i>
                </template>
              </el-button>
            </el-tooltip>
          </div>
          <div class="buttons">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="返回"
              placement="left"
            >
              <el-button @click="showFH" size="large" circle>
                <template #icon>
                  <i class="icon iconfont icon-fanhui"></i>
                </template>
              </el-button>
            </el-tooltip>
          </div>
        </div>
      </div>
    </vue3ResizeDrag>
  
    <!-- 如果要拖动 变量改为 xm_Dragg -->
    <vue3ResizeDrag
      v-if="HT_div"
      :isDraggable="false"
      :w="350"
      :y="22"
      :x="activeRight"
      :zIndex="99"
    >
      <div class="vue3-resize-drag22">合同清单</div>
  
      <div class="xm_fb">
        <div class="tab_card">
          <div
            @click="click_RRR(item, tabCard)"
            v-for="(item, index) in tabCard"
            :class="item.checked ? 'active_class_item' : ''"
            :key="index"
            class="cartd_item"
          >
            <span v-if="item.title == '人员'"
              ><i class="icon iconfont icon-yuangongliebiao"></i
            ></span>
            <span v-if="item.title == '合同'">
              <i class="icon iconfont icon-hetongchaxun"></i
            ></span>
            <span v-if="item.title == '返回'">
              <i class="icon iconfont icon-fanhui"></i
            ></span>
            &nbsp;
            {{ item.title }}
          </div>
        </div>
  
        <div class="white_color item_1 height223">
          <Echart id="HTQD" :data="HTQDData"></Echart>
          <!-- <img class="img_ls" src="../assets/image/pic.png" alt="" /> -->
        </div>
  
        <div style="margin-top: 10px">
          <div class="search_input_s">
            <el-input
              ref="contractInput"
              v-model="contractName"
              placeholder="请输入合同名"
            />
          </div>
          <el-scrollbar height="400">
            <div
              @click="rowClickContract(item)"
              v-for="(item, index) in contractData"
              :key="index"
              class="white_color item_2 flexsim_s"
            >
              <div style="width: 100%">
                <p class="manage2">
                  <span style="color: #0081ff">合同编号：</span>
                  <span>{{ item.contractCode }}</span>
                </p>
                <p style="margin-top: 10px" class="manage2">
                  <span style="color: #0081ff">合同名称：</span>
                  <span>{{ item.contractName }}</span>
                </p>
                <p style="margin-top: 10px" class="manage2">
                  <span style="color: #0081ff">供应商：</span>
                  <span>{{ item.vendor }}</span>
                </p>
                <div
                  v-if="!item.pj_show"
                  style="margin-top: 5px"
                  class="manage2 pj_box"
                >
                  <span style="color: #0081ff">评价：</span>
                  &nbsp;&nbsp;
                  <span v-if="item.Assessment && item.Assessment !== ''">{{
                    item.Assessment
                  }}</span>
                  <span style="color: #999" v-else>暂无评价</span>
                  &nbsp;&nbsp;
                  <el-button
                    @click="EditTET(item, index, contractData, item)"
                    type="primary"
                    size="small"
                    text
                    >编辑</el-button
                  >
                </div>
                <div
                  v-if="item.pj_show"
                  style="margin-top: 7px"
                  class="manage2 pj_box"
                >
                  <span>评价：</span>
                  &nbsp;
                  <el-input
                    ref="PJRef"
                    style="width: 155px"
                    v-model="item.Assessment"
                    @change="(val) => handleSelectChangePJ(val, index, item)"
                    placeholder="输入评价"
                    size="small"
                  />
                  &nbsp;&nbsp;
                  <el-button
                    @click="QS_subimt(contractData, item)"
                    type="primary"
                    size="small"
                    text
                    >确定</el-button
                  >
                </div>
              </div>
            </div>
          </el-scrollbar>
  
          <div class="person_pagination">
            <el-pagination
              small="small"
              v-model:current-page="contractPageNum"
              v-model:page-size="contractPageSize"
              :page-sizes="[20, 30, 50]"
              background
              layout="pager "
              :total="contractTotal"
              @size-change="contractSizeChange"
              @current-change="contractCurrentChange"
            />
          </div>
        </div>
  
        <div style="display: none" class="left_button_box showitem">
          <div class="buttons">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="人员"
              placement="left"
            >
              <el-button @click="showRY" size="large" circle>
                <template #icon>
                  <i class="icon iconfont icon-yuangongliebiao"></i>
                </template>
              </el-button>
            </el-tooltip>
          </div>
          <div class="buttons">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="合同"
              placement="left"
            >
              <el-button @click="showHT" size="large" circle>
                <template #icon>
                  <i class="icon iconfont icon-hetongchaxun"></i>
                </template>
              </el-button>
            </el-tooltip>
          </div>
          <div class="buttons">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="返回"
              placement="left"
            >
              <el-button @click="showFH" size="large" circle>
                <template #icon>
                  <i class="icon iconfont icon-fanhui"></i>
                </template>
              </el-button>
            </el-tooltip>
          </div>
        </div>
      </div>
    </vue3ResizeDrag>
  
    <!-- 如果要拖动 变量改为 xm_Dragg -->
    <vue3ResizeDrag
      v-if="RYFB_div"
      :isDraggable="false"
      :w="350"
      :y="22"
      :x="activeRight"
      :zIndex="99"
    >
      <div class="vue3-resize-drag22">人员分布</div>
  
      <div class="xm_fb">
        <div class="button_constion">
          <el-button
            @click="RYXQShowFn"
            :loading="RYlOADING"
            type="primary"
            plain
            round
            size="small"
            >人员维护</el-button
          >
        </div>
        <div class="show_flase_title">项目人员分布情况</div>
        <div class="white_color item_1 height247">
          <Echart id="RY" :data="RYData"></Echart>
        </div>
  
        <div style="margin-top: 10px">
          <div class="search_input_s">
            <el-input
              ref="personInput"
              v-model="personFBName"
              placeholder="请输入人员名称"
            />
          </div>
          <el-scrollbar height="400">
            <div
              v-for="(item, index) in RYFBData"
              :key="index"
              class="white_color item_2"
              @click="showItem_box(item, RYFBData)"
            >
              <div class="flexsim_s">
                <div class="img_box">
                  <img :src="imgFn(item.icon)" alt="" />
                </div>
                <div>
                  <div class="manage223">
                    <div class="div1">
                      <span>姓名：</span>
                      <span>{{ item.name }}</span>
                    </div>
                    <div class="div2">
                      <span>职位：</span>
                      <span>{{ item.Rank }}</span>
                    </div>
                  </div>
                  <div style="margin-top: 10px" class="manage223">
                    <div class="div1">
                      <span>状态：</span>
                      <span v-if="item.state === 0">
                        <i
                          style="color: #cdcdcd"
                          class="icon iconfont icon-touxiang-copy-copy"
                        ></i
                      ></span>
                      <span v-if="item.state === 1">
                        <i
                          style="color: #215aa9"
                          class="icon iconfont icon-touxiang-copy-copy"
                        ></i
                      ></span>
                    </div>
                    <div class="div2">
                      <span>参与项目：</span>
                      <span>{{ item.projects }}个</span>
                    </div>
                  </div>
                  <p style="margin-top: 10px" class="manage223">
                    <span>电话：</span>
                    <span>{{ item.phone }}</span>
                  </p>
                </div>
              </div>
              <transition name="dialogFade">
                <div v-if="item.showItem" class="detail_RYXX">
                  <div class="projec_cas">
                    <div class="title">
                      <el-icon><Opportunity /></el-icon> 参与项目
                    </div>
  
                    <div
                      v-for="(i, destory) in item.project"
                      v-if="item.project && item.project.length > 0"
                      :key="destory"
                      class="project_item"
                    >
                      <el-tooltip
                        class="box-item"
                        effect="dark"
                        :content="i"
                        placement="left"
                      >
                        <div
                          style="
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                          "
                        >
                          {{ i }}
                        </div>
                      </el-tooltip>
                    </div>
                    <div class="project_item" v-else style="color: #999">
                      暂无该人员参与的项目
                    </div>
                  </div>
                  <div class="projec_WC">
                    <div class="title">
                      <el-icon><Flag /></el-icon> 完成进度
                    </div>
                    <div
                      v-if="item.remaining && item.remaining.length > 0"
                      v-for="(i, destory) in item.remaining"
                      :key="destory"
                      class="project_item"
                    >
                      {{ i * 100 }}%
                    </div>
                    <div v-else style="color: #999">暂无项目进度</div>
                  </div>
                </div>
              </transition>
            </div>
          </el-scrollbar>
  
          <!-- <div class="person_pagination">
            <el-pagination
              small="small"
              v-model:current-page="personFBPageNum"
              v-model:page-size="personFBPageSize"
              :page-sizes="[20, 30, 50]"
              background
              layout="pager "
              :total="personFBTotal"
              @size-change="personFBSizeChange"
              @current-change="personFBCurrentChange"
            />
          </div> -->
        </div>
  
        <!-- <div class="left_button_box showitem">
          <div class="buttons">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="人员"
              placement="left"
            >
              <el-button size="large" circle>
                <template #icon>
                  <i class="icon iconfont icon-yuangongliebiao"></i>
                </template>
              </el-button>
            </el-tooltip>
          </div>
          <div class="buttons">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="合同"
              placement="left"
            >
              <el-button size="large" circle>
                <template #icon>
                  <i class="icon iconfont icon-hetongchaxun"></i>
                </template>
              </el-button>
            </el-tooltip>
          </div>
          <div class="buttons">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="返回"
              placement="left"
            >
              <el-button @click="showFH" size="large" circle>
                <template #icon>
                  <i class="icon iconfont icon-fanhui"></i>
                </template>
              </el-button>
            </el-tooltip>
          </div>
        </div> -->
      </div>
    </vue3ResizeDrag>
  
    <!-- 如果要拖动 变量改为 xm_Dragg -->
    <vue3ResizeDrag
      v-if="CJFB_div"
      :isDraggable="false"
      :w="350"
      :y="22"
      :x="activeRight"
      :zIndex="9"
    >
      <div class="vue3-resize-drag22">供应商分布</div>
  
      <div class="xm_fb">
        <div class="GSS_select">
          <el-select
            style="width: 80px"
            v-model="typeSelect_s"
            class="m-2"
            placeholder="请选择类型"
            size="small"
          >
            <el-option
              v-for="item in [
                {
                  value: '全部',
                  label: '全部',
                },
                {
                  value: '进行中',
                  label: '进行中',
                },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
  
        <div class="white_color item_1 height223">
          <!-- <img class="img_ls" src="../assets/image/pic.png" alt="" /> -->
          <Echart id="GYS" :data="GYSData"></Echart>
        </div>
  
        <div style="margin-top: 10px">
          <div class="search_input_s">
            <el-select
              :teleported="false"
              placement="bottom"
              clearable
              filterable
              v-model="selectProject"
              placeholder="请选择项目"
            >
              <el-option
                v-for="item in projectSelectOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div style="margin-top: 10px" class="search_input_s">
            <el-input
              ref="GYSInput"
              v-model="vendorName"
              placeholder="请输入供应商名称"
            />
          </div>
          <el-scrollbar height="400">
            <div
              style="padding-left: 17px !important"
              v-for="(item, index) in CJData"
              :key="index"
              class="white_color item_2"
              @click="showItem_box2(item, CJData)"
            >
              <div>
                <p class="manage2">
                  <span class="new_title">名称：</span>
                  <span>{{ item.community }}</span>
                </p>
                <div style="margin-top: 10px" class="manage223">
                  <div class="div1">
                    <span class="new_title">联系人：</span>
                    <span>安峰博</span>
                  </div>
                  <div class="div2">
                    <span class="new_title">电话：</span>
                    <span>13201691099</span>
                  </div>
                </div>
                <p style="margin-top: 10px" class="manage2 new_stlle_G">
                  <span class="new_title">地址：</span>
                  <span class="new_span_style_cs">{{ item.building }}</span>
                </p>
              </div>
  
              <transition name="dialogFade">
                <div
                  v-if="item.showItem"
                  style="justify-content: space-between"
                  class="detail_RYXX"
                >
                  <div style="width: auto" class="projec_cas">
                    <div class="title">
                      <el-icon><Management /></el-icon> 项目编号
                    </div>
  
                    <div
                      style="
                        height: 23px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                      "
                      v-for="(i, destory) in HistoryArr"
                      v-if="HistoryArr && HistoryArr.length > 0"
                      :key="destory"
                      class="project_item"
                    >
                      <el-tooltip
                        class="box-item"
                        effect="dark"
                        :content="i.projectNum"
                        placement="left"
                      >
                        <!-- <div v-if='item.HistoryArr.findIndex(el => el.projectNum === i.projectNum) === destory' style='white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;'>  {{i.projectNum}}</div>
  
  <div v-else style='white-space: nowrap;
      overflow: hidden;
      opacity:0;
      text-overflow: ellipsis;'>  "" </div> -->
                        <div
                          style="
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                          "
                        >
                          {{ i.projectNum }}
                        </div>
                      </el-tooltip>
                    </div>
                    <div class="project_item" v-else style="color: #999">
                      暂无历史项目
                    </div>
                  </div>
                  <div style="width: auto" class="projec_WC">
                    <div class="title">
                      <el-icon><Briefcase /></el-icon> 历史合同号
                    </div>
                    <div
                      style="
                        height: 23px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                      "
                      v-if="HistoryArr && HistoryArr.length > 0"
                      v-for="(i, destory) in HistoryArr"
                      :key="destory"
                      class="project_item"
                    >
                      {{ i.contractNum }}
                    </div>
                    <div v-else style="color: #999">暂无历史合同</div>
                  </div>
  
                  <div style="width: auto" class="projec_WC">
                    <div class="title">
                      <el-icon><QuestionFilled /></el-icon> 合同清单
                    </div>
                    <div
                      style="
                        height: 23px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 15px;
                        color: #0081ff;
                      "
                      v-if="HistoryArr && HistoryArr.length > 0"
                      v-for="(i, destory) in HistoryArr"
                      :key="destory"
                      class="project_item"
                    >
                      <el-popover
                        placement="left-start"
                        @before-enter="getHTQDdATA(i.contractNum)"
                        :width="300"
                        trigger="hover"
                      >
                        <div class="table_HTQD">
                          <el-table
                            :header-cell-style="{
                              background: '#fafbfc',
                              color: '#333333',
                            }"
                            :max-height="300"
                            :data="tableDataHTQD"
                          >
                            <el-table-column prop="number" label="物资位号" />
                            <el-table-column prop="describe" label="描述">
                              <template #default="props">
                                <el-tooltip
                                  v-if="props.row.description"
                                  class="box-item"
                                  effect="dark"
                                  :content="props.row.description"
                                  placement="top-start"
                                >
                                  <div
                                    v-if="props.row.description"
                                    style="
                                      overflow: hidden;
                                      white-space: nowrap;
                                      text-overflow: ellipsis;
                                    "
                                  >
                                    {{ props.row.description }}
                                  </div>
                                </el-tooltip>
                                <div v-else>暂无评价</div>
                              </template>
                            </el-table-column>
                          </el-table>
                        </div>
  
                        <!-- <div style="font-size: 10px;margin-bottom:10px">
      <p style="color:#0081ff;font-weight: bolder;">物资位号:</p>
   
  
      <el-tooltip
              class="box-item"
              effect="dark"
              :content="i.number"
              placement="left"
            >
            <p v-if='i.number' style='white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;'>{{i.number}}</p>
          <p v-else>暂无数据</p>
            </el-tooltip>
  
       
  
     
    </div>
    <div style="font-size: 10px;">
      <p style="color:#0081ff;font-weight: bolder;">合同描述:</p>
      <el-tooltip
              class="box-item"
              effect="dark"
              :content="i.describe"
              placement="left"
            >
            <p v-if='i.describe' style='white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;'>{{i.describe}}</p>
          <p v-else>暂无数据</p>
            </el-tooltip>
    </div> -->
                        <template #reference>
                          <el-icon><InfoFilled /></el-icon>
                        </template>
                      </el-popover>
                    </div>
                    <div v-else style="color: #999">暂无清单</div>
                  </div>
                </div>
              </transition>
            </div>
          </el-scrollbar>
  
          <div class="person_pagination">
            <el-pagination
              small="small"
              v-model:current-page="vendorMapPageNum"
              v-model:page-size="vendorMapPageSize"
              :page-sizes="[20, 30, 50]"
              background
              layout="pager "
              :total="vendorMapTotal"
              @size-change="vendorMapSizeChange"
              @current-change="vendorMapCurrentChange"
            />
          </div>
        </div>
  
        <!-- <div class="left_button_box showitem">
          <div class="buttons">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="人员"
              placement="left"
            >
              <el-button size="large" circle>
                <template #icon>
                  <i class="icon iconfont icon-yuangongliebiao"></i>
                </template>
              </el-button>
            </el-tooltip>
          </div>
          <div class="buttons">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="合同"
              placement="left"
            >
              <el-button size="large" circle>
                <template #icon>
                  <i class="icon iconfont icon-hetongchaxun"></i>
                </template>
              </el-button>
            </el-tooltip>
          </div>
          <div class="buttons">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="返回"
              placement="left"
            >
              <el-button @click="showFH" size="large" circle>
                <template #icon>
                  <i class="icon iconfont icon-fanhui"></i>
                </template>
              </el-button>
            </el-tooltip>
          </div>
        </div> -->
      </div>
    </vue3ResizeDrag>
  
    <el-dialog
      @close="closeApplyD"
      :close-on-click-modal="false"
      width="70%"
      v-model="dialogVisibleRYSQ"
    >
      <template #header> 申请时间 {{ currentTimeFn() }} </template>
      <div class="total_apply">
        <div class="header_apply">
          <div class="header_icon">
            <div>
              <el-icon><Avatar /></el-icon>
            </div>
            &nbsp;
            <div>人员入项申请</div>
  
            <div class="button">
              <el-button size="small" @click="addApplyPerson" type="primary"
                >添加人员</el-button
              >
            </div>
          </div>
  
          <el-table :data="applyTableSubmit" style="width: 100%">
            <el-table-column prop="name" label="姓名">
              <template #default="scope">
                <el-select
                  filterable
                  ref="select_apply"
                  @focus="focus_select"
                  placement="bottom"
                  @change="
                    (val) => handleSelectChange(val, scope.$index, scope.row)
                  "
                  value-key="id"
                  placeholder="请选择人员"
                  v-model="selectData[scope.$index]"
                >
                  <el-option
                    v-for="(item, index) in applyTableOptions"
                    :key="index"
                    :value="item"
                    :label="item.name"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="岗位要求">
              <template #default="scope">
                <el-select
                  ref="select_apply"
                  filterable
                  placement="bottom"
                  @change="
                    (val) => handleSelectChangeGW(val, scope.$index, scope.row)
                  "
                  value-key="id"
                  placeholder="请选择岗位要求"
                  v-model="selectDataGW[scope.$index]"
                >
                  <el-option
                    v-for="(item, index) in [
                      {
                        value: 0,
                        label: '到现场',
                      },
                      {
                        value: 1,
                        label: '参与项目',
                      },
                    ]"
                    :key="index"
                    :value="item.value"
                    :label="item.label"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
  
            <el-table-column width="250" label="预计到岗时间">
              <template #default="scope">
                <el-date-picker
                  type="datetime"
                  placeholder="请输入预计时间"
                  v-model="selectDateTime[scope.$index]"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  @change="
                    (val) => handleSelectChangeDate(val, scope.$index, scope.row)
                  "
                >
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column width="150" label="工作内容">
              <template #default="scope">
                <el-input
                  placeholder="请输入工作内容"
                  v-model="workContent[scope.$index]"
                  @change="
                    (val) => handleSelectChangeWork(val, scope.$index, scope.row)
                  "
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="num" label="工号" />
            <el-table-column
              prop="project"
              show-overflow-tooltip
              label="所属项目"
              width="400"
            >
              <template #default="scope">
                <div style="display: flex; align-items: center">
                  <el-tag
                    v-for="(item, index) in scope.row.project"
                    :key="index"
                    class="ml-2"
                    type="success"
                    >{{ item }}</el-tag
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="positionJob" label="职位" />
  
            <el-table-column label="操作">
              <template #default="scope">
                <el-button @click="Delperson(scope.$index)" type="danger" plain
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
  
        <div v-if="false" class="header_apply margin_top_14">
          <div class="header_icon">
            <div>
              <el-icon><InfoFilled /></el-icon>
            </div>
            &nbsp;
            <div>入项说明</div>
          </div>
          &nbsp;&nbsp;
          <el-input
            v-model="applyExplain"
            :autosize="{ minRows: 4, maxRows: 7 }"
            type="textarea"
            placeholder="请输入入项说明"
          />
        </div>
      </div>
  
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisibleRYSQ = false">取消</el-button>
          <el-button type="primary" @click="submitApplyFn"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  
    <el-dialog
      :close-on-click-modal="false"
      width="40%"
      v-model="dialogVisibleApply"
      title="待办事项"
    >
      <el-table :data="applyTableData" style="width: 100%">
        <el-table-column prop="applicant" width="100" label="申请人" />
  
        <el-table-column
          prop="projectName"
          width="350"
          show-overflow-tooltip
          label="所属项目"
        />
        <el-table-column prop="applyTime" label="申请时间" />
  
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" @click="checkView(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  
    <el-dialog
      @close="closeApplyD2"
      :close-on-click-modal="false"
      width="82%"
      v-model="dialogVisibleDBSX"
    >
      <div class="total_apply">
        <div class="button_setion_s">
          <div
            @click="gotoNEWpAGE(1)"
            :class="!showNEW2 ? 'active' : ''"
            class="button_items"
          >
            <el-icon><WarningFilled /></el-icon> 待审批
          </div>
  
          <div
            @click="gotoNEWpAGE(2)"
            :class="!showNEW1 ? 'active' : ''"
            class="button_items"
          >
            <el-icon><Histogram /></el-icon>历史审批
          </div>
        </div>
        <div v-if="showNEW1" class="header_apply">
          <div class="header_icon">
            <div>
              <el-icon><Avatar /></el-icon>
            </div>
            &nbsp;
            <div v-if="showType == 1 || showType == 0">待组长审批</div>
            <div v-if="showType == 2">待主任审批</div>
          </div>
  
          <el-table
            :span-method="tableSpanMethod"
            @cell-mouse-enter="mouseenterTable"
            :data="applyTableSubmit2"
            style="width: 100%"
          >
            <el-table-column label="申请人" width="100" prop="applyName">
            </el-table-column>
            <el-table-column prop="applyTime" label="申请时间" width="180" />
            <el-table-column prop="project" label="所属项目" width="350">
              <template #default="scope">
                <div
                  v-for="(item, index) in scope.row.project"
                  :key="index"
                  class="project_xms"
                >
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="item"
                    placement="top-start"
                  >
                    {{ item }}
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="工作内容" width="120">
              <template #default="scope">
                <div>
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="scope.row.workContent"
                    placement="top-start"
                  >
                    <p
                      style="
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                    >
                      {{ scope.row.workContent }}
                    </p>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="80" prop="applyPerson" label="人力需求" />
            <el-table-column prop="estimatedArrivalTime" label="预计到达时间">
            </el-table-column>
  
            <el-table-column width="80" label="岗位要求">
              <template #default="scope">
                <div v-if="scope.row.jobRequire === 0">到现场</div>
                <div v-if="scope.row.jobRequire === 1">参与项目</div>
              </template>
            </el-table-column>
  
            <el-table-column
              width="120"
              v-if="showType == 0"
              show-overflow-tooltip
              label="组长审批状态"
            >
              <template #default="scope">
                <div v-if="scope.row.applyLeaderState == 0">
                  <el-tag class="ml-2"> 待组长审批</el-tag>
                </div>
                <div v-if="scope.row.applyLeaderState == 1">
                  <el-tag class="ml-2" type="success"> 组长通过</el-tag>
                </div>
  
                <div v-if="scope.row.applyLeaderState == 2">
                  <el-tag class="ml-2" type="danger">
                    <span>组长驳回</span>：{{ scope.row.applyLeaderMsg }}</el-tag
                  >
                </div>
              </template>
            </el-table-column>
  
            <el-table-column
              v-if="showType == 2"
              show-overflow-tooltip
              label="操作"
            >
              <template #default="scope">
                <div
                  v-if="
                    scope.row.applyLeaderState == 1 &&
                    scope.row.applyDirectorState == 0
                  "
                >
                  <el-button link @click="TG(scope.row)" type="primary" plain
                    >通过</el-button
                  >
  
                  <el-popover
                    ref="popoverRefBH"
                    width="300"
                    trigger="click"
                    title="驳回原因"
                    @hide="canelBH"
                  >
                    <div>
                      <el-input
                        v-model="BHReason"
                        type="textarea"
                        placeholder="请填写驳回原因"
                      ></el-input>
                    </div>
  
                    <div
                      style="
                        margin-top: 10px;
                        display: flex;
                        justify-content: flex-end;
                      "
                    >
                      <el-button @click="canelBH">取消</el-button>
                      <el-button @click="BH(scope.row)" type="primary"
                        >确定</el-button
                      >
                    </div>
                    <template #reference>
                      <el-button link type="primary" plain>驳回</el-button>
                    </template>
                  </el-popover>
                </div>
  
                <div v-if="scope.row.applyDirectorState == 1">
                  <el-tag class="ml-2" type="success"> 主任通过</el-tag>
                </div>
  
                <div v-if="scope.row.applyDirectorState == 2">
                  <el-tag class="ml-2" type="danger">
                    <span>主任驳回</span>：{{
                      scope.row.applyDirectorMsg
                    }}</el-tag
                  >
                </div>
              </template>
            </el-table-column>
  
            <el-table-column
              v-if="showType == 1"
              show-overflow-tooltip
              label="操作"
            >
              <template #default="scope">
                <div v-if="scope.row.applyLeaderState == 0">
                  <el-button link @click="TG(scope.row)" type="primary" plain
                    >通过</el-button
                  >
  
                  <el-popover
                    ref="popoverRefBH"
                    width="300"
                    trigger="click"
                    title="驳回原因"
                    @hide="canelBH"
                  >
                    <div>
                      <el-input
                        v-model="BHReason"
                        type="textarea"
                        placeholder="请填写驳回原因"
                      ></el-input>
                    </div>
  
                    <div
                      style="
                        margin-top: 10px;
                        display: flex;
                        justify-content: flex-end;
                      "
                    >
                      <el-button @click="canelBH">取消</el-button>
                      <el-button @click="BH(scope.row)" type="primary"
                        >确定</el-button
                      >
                    </div>
                    <template #reference>
                      <el-button link type="primary" plain>驳回</el-button>
                    </template>
                  </el-popover>
                </div>
  
                <div v-if="scope.row.applyLeaderState == 1">
                  <el-tag class="ml-2" type="success"> 组长通过</el-tag>
                </div>
  
                <div v-if="scope.row.applyLeaderState == 2">
                  <el-tag class="ml-2" type="danger">
                    <span>组长驳回</span>：{{ scope.row.applyLeaderMsg }}</el-tag
                  >
                </div>
              </template>
            </el-table-column>
  
            <el-table-column v-if="showType == 2" label="组长审批状态">
              <template #default="scope">
                <div v-if="scope.row.applyLeaderState == 0">
                  <el-tag class="ml-2"> 待组长审批</el-tag>
                </div>
                <div v-if="scope.row.applyLeaderState == 1">
                  <el-tag class="ml-2" type="success"> 组长通过</el-tag>
                </div>
                <div v-if="scope.row.applyLeaderState == 2">
                  <el-tag class="ml-2" type="danger">
                    <span>组长驳回</span>：{{ scope.row.applyLeaderMsg }}</el-tag
                  >
                </div>
              </template>
            </el-table-column>
  
            <el-table-column v-if="showType == 1" label="主任审批状态">
              <template #default="scope">
                <div v-if="scope.row.applyDirectorState == 1">
                  <el-tag class="ml-2" type="success"> 主任通过</el-tag>
                </div>
                <div v-if="scope.row.applyDirectorState == 2">
                  <el-tag class="ml-2" type="danger">
                    <span>主任驳回</span>：{{
                      scope.row.applyDirectorMsg
                    }}</el-tag
                  >
                </div>
                <div
                  v-if="
                    scope.row.applyLeaderState == 1 &&
                    scope.row.applyDirectorState == 0
                  "
                >
                  <el-tag> 待主任审批</el-tag>
                </div>
              </template>
            </el-table-column>
  
            <el-table-column v-if="showType == 0" label="主任审批状态">
              <template #default="scope">
                <div v-if="scope.row.applyDirectorState == 1">
                  <el-tag class="ml-2" type="success"> 主任通过</el-tag>
                </div>
                <div v-if="scope.row.applyDirectorState == 2">
                  <el-tag class="ml-2" type="danger">
                    <span>主任驳回</span>：{{
                      scope.row.applyDirectorMsg
                    }}</el-tag
                  >
                </div>
                <div
                  v-if="
                    scope.row.applyLeaderState == 1 &&
                    scope.row.applyDirectorState == 0
                  "
                >
                  <el-tag class="ml-2"> 主任审批中</el-tag>
                </div>
                <div
                  v-if="
                    scope.row.applyLeaderState == 2 &&
                    scope.row.applyDirectorState == 0
                  "
                ></div>
              </template>
            </el-table-column>
          </el-table>
        </div>
  
        <div v-if="showNEW2" class="header_apply">
          <div class="header_icon">
            <div>
              <el-icon><Avatar /></el-icon>
            </div>
            &nbsp;
  
            <div>历史审批</div>
          </div>
  
          <el-table
            :span-method="tableSpanMethod3"
            @cell-mouse-enter="mouseenterTable"
            :data="applyTableSubmit3"
            style="width: 100%"
          >
            <el-table-column label="申请人" width="100" prop="applyName">
            </el-table-column>
            <el-table-column prop="applyTime" label="申请时间" width="180" />
            <el-table-column prop="project" label="所属项目" width="350">
              <template #default="scope">
                <div
                  v-for="(item, index) in scope.row.project"
                  :key="index"
                  class="project_xms"
                >
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="item"
                    placement="top-start"
                  >
                    {{ item }}
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="工作内容" width="120">
              <template #default="scope">
                <div>
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="scope.row.workContent"
                    placement="top-start"
                  >
                    <p
                      style="
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                    >
                      {{ scope.row.workContent }}
                    </p>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="80" prop="applyPerson" label="人力需求" />
            <el-table-column prop="estimatedArrivalTime" label="预计到达时间">
            </el-table-column>
  
            <el-table-column width="80" label="岗位要求">
              <template #default="scope">
                <div v-if="scope.row.jobRequire === 0">到现场</div>
                <div v-if="scope.row.jobRequire === 1">参与项目</div>
              </template>
            </el-table-column>
  
            <el-table-column label="组长审批状态">
              <template #default="scope">
                <div v-if="scope.row.applyLeaderState == 0">
                  <el-tag class="ml-2"> 待组长审批</el-tag>
                </div>
                <div v-if="scope.row.applyLeaderState == 1">
                  <el-tag class="ml-2" type="success"> 组长通过</el-tag>
                </div>
                <div v-if="scope.row.applyLeaderState == 2">
                  <el-tag class="ml-2" type="danger">
                    <span>组长驳回</span>：{{ scope.row.applyLeaderMsg }}</el-tag
                  >
                </div>
              </template>
            </el-table-column>
  
            <el-table-column label="主任审批状态">
              <template #default="scope">
                <div v-if="scope.row.applyDirectorState == 1">
                  <el-tag class="ml-2" type="success"> 主任通过</el-tag>
                </div>
                <div v-if="scope.row.applyDirectorState == 2">
                  <el-tag class="ml-2" type="danger">
                    <span>主任驳回</span>：{{
                      scope.row.applyDirectorMsg
                    }}</el-tag
                  >
                </div>
                <div
                  v-if="
                    scope.row.applyLeaderState == 1 &&
                    scope.row.applyDirectorState == 0
                  "
                >
                  <el-tag class="ml-2"> 主任审批中</el-tag>
                </div>
                <div
                  v-if="
                    scope.row.applyLeaderState == 2 &&
                    scope.row.applyDirectorState == 0
                  "
                ></div>
              </template>
            </el-table-column>
          </el-table>
  
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: flex-end;
              margin-top: 20px;
            "
          >
            <el-pagination
              :page-sizes="[20, 30, 50]"
              @size-change="SPSizeChange2"
              @current-change="SPCurrentChange2"
              v-model:current-page="SPPageNum2"
              v-model:page-size="SPPageSize2"
              background
              layout="total,prev, pager, next,sizes"
              :total="SPtotalPage2"
            />
          </div>
        </div>
  
        <div v-if="showType !== 0 && showNEW1" class="header_apply margin_top_14">
          <div class="header_icon">
            <div>
              <el-icon><TrendCharts /></el-icon>
            </div>
            &nbsp;
            <div v-if="showType == 1">本组人员状态</div>
            <div v-if="showType == 2">全部人员状态</div>
          </div>
          <el-table :height="300" :data="applyTableProcess" style="width: 100%">
            <el-table-column type="index" width="80" label="序号" />
            <el-table-column prop="name" width="100" label="人员">
            </el-table-column>
            <el-table-column prop="name" width="350" label="项目">
              <template #default="scope">
                <div
                  v-for="(item, index) in scope.row.project"
                  :key="index"
                  class="project_xms"
                >
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="item.value"
                    placement="top-start"
                  >
                    <div class="_user" v-if="item.color == 0">
                      {{ item.value }}
                    </div>
                    <div class="red_user" v-if="item.color == 1">
                      {{ item.value }}
                    </div>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="剩余工作量">
              <template #default="scope">
                <div
                  v-for="(item, index) in scope.row.remaining"
                  :key="index"
                  class="project_xms"
                >
                  <div class="_user" v-if="item.color == 0">
                    {{ item.value * 100 }}%
                  </div>
                  <div class="red_user" v-if="item.color == 1">
                    {{ item.value * 100 }}%
                  </div>
                  <div></div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="状态">
              <template #default="scope">
                <div
                  v-for="(item, index) in scope.row.state"
                  :key="index"
                  class="project_xms"
                >
                  <div class="_user" v-if="item == '不在现场'">{{ item }}</div>
                  <div class="red_user" v-if="item == '在现场'">{{ item }}</div>
                </div>
              </template>
            </el-table-column>
  
            <el-table-column prop="name" label="实际到达时间">
              <template #default="scope">
                <div
                  v-for="(item, index) in scope.row.arrivalTime"
                  :key="index"
                  class="project_xms"
                >
                  <div class="_user" v-if="item.color == 0">{{ item.value }}</div>
                  <div class="red_user" v-if="item.color == 1">
                    {{ item.value }}
                  </div>
                  <div></div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="员工类型"> </el-table-column>
          </el-table>
          <!-- <div style="display:flex;align-items:center;justify-content:flex-end;margin-top:20px;">
      <el-pagination  
    :page-sizes="[20, 30, 50]"
    @size-change="SPSizeChange"
              @current-change="SPCurrentChange"
              v-model:current-page="SPPageNum"
              v-model:page-size="SPPageSize"
              background layout="total,prev, pager, next,sizes" :total="SPtotalPage" />
    </div> -->
        </div>
      </div>
    </el-dialog>
  
    <el-dialog
      class="RYWH"
      :fullscreen="false"
      
      :close-on-click-modal="false"
      width="85%"
      top="30px"
      v-model="dialogVisibleXQ"
    >
      <div class="total_apply">
        <div class="header_apply table_sd">
          <div class="header_icon">
            <div>
              <el-icon><TrendCharts /></el-icon>
            </div>
            &nbsp;
  
            <div>人员维护</div>
  
            <div class="button">
              <el-button
                size="small"
                :icon="Download"
                @click="DCRYWH"
                type="primary"
                >导出</el-button
              >
            </div>
          </div>
          <el-table
            :span-method="tableSpanMethod2"
            :height="680"
            :data="XQTable"
            style="width: 100%"
          >
            <el-table-column width="80" fixed prop="personCode" label="序号">
            </el-table-column>
            <el-table-column width="100" fixed prop="name" label="姓名">
              <template #default="scope">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="scope.row.name"
                  placement="top-start"
                >
                  <div
                    style="
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    "
                  >
                    {{ scope.row.name }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column width="120" fixed prop="workCode" label="工作证号">
              <template #header>
                <div class="filter_item">
                  <span>工作证号</span>
  
                  <el-popover :width="200" trigger="hover">
                    <template #reference>
                      <div
                        class="icone"
                        :class="workCode.length == 0 ? '' : 'active'"
                      >
                        <el-icon><Filter /></el-icon>
                      </div>
                    </template>
                    <el-select-v2
                      :teleported="false"
                      v-model="workCode"
                      multiple
                      collapse-tags
                      collapse-tags-tooltip
                      filterable
                      :options="allWorkCode"
                      placeholder="请选择工作证号"
                      style="width: 180px"
                      size="small"
                    >
                    </el-select-v2>
  
                    <!-- <el-select
                 :teleported ='false'
                 size="small"
                 multiple
                 filterable
            collapse-tags
            collapse-tags-tooltip
                  v-model="data"  placeholder="">
              <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
                      </el-select>  -->
                  </el-popover>
  
                  <!-- <filterCom :options="allWorkCode" @chooseItem="chooseworkCode"></filterCom> -->
                </div>
              </template>
            </el-table-column>
            <el-table-column width="80" fixed prop="title" label="职称">
            </el-table-column>
            <el-table-column prop="type" fixed width="100" label="聘用形式">
            </el-table-column>
            <el-table-column
              prop="remaining"
              fixed
              width="120"
              label="工作饱满程度"
            >
            </el-table-column>
            <el-table-column prop="projectNum" fixed width="100" label="项目数目">
            </el-table-column>
  
            <el-table-column prop="project" width="150" label="参与项目名称">
              <template #default="scope">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="scope.row.project"
                  placement="top-start"
                >
                  <div
                    style="
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    "
                  >
                    {{ scope.row.project }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
  
            <el-table-column prop="projectCode" width="150" label="项目代号">
              <template #header>
                <div class="filter_item">
                  <span>项目代号</span>
  
                  <el-popover :width="200" trigger="hover">
                    <template #reference>
                      <div
                        class="icone"
                        :class="projectCodeSelect.length == 0 ? '' : 'active'"
                      >
                        <el-icon><Filter /></el-icon>
                      </div>
                    </template>
                    <el-select-v2
                      :teleported="false"
                      v-model="projectCodeSelect"
                      multiple
                      collapse-tags
                      collapse-tags-tooltip
                      filterable
                      :options="allprojectCodeSelect"
                      placeholder="请选择项目代号"
                      style="width: 180px"
                      size="small"
                    >
                    </el-select-v2>
                  </el-popover>
                </div>
              </template>
              <template #default="scope">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="scope.row.projectCode"
                  placement="top-start"
                >
                  <div
                    style="
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    "
                  >
                    {{ scope.row.projectCode }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
  
            <el-table-column prop="arrivalTime" width="100" label="到场时间">
              <template #default="scope">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="scope.row.arrivalTime"
                  placement="top-start"
                >
                  <div
                    style="
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    "
                  >
                    {{ scope.row.arrivalTime }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="exitTime" width="100" label="出项时间">
              <template #default="scope">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="scope.row.exitTime"
                  placement="top-start"
                >
                  <div
                    style="
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    "
                  >
                    {{ scope.row.exitTime }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
  
            <el-table-column prop="phase" width="100" label="工作阶段">
            </el-table-column>
  
            <el-table-column prop="leader" width="110" label="项目负责人">
            </el-table-column>
  
            <el-table-column prop="specialities" width="75" label="专业">
            </el-table-column>
  
            <el-table-column prop="role" width="110" label="担任角色">
              <template #header>
                <div class="filter_item">
                  <span>担任角色</span>
  
                  <el-popover :width="200" trigger="hover">
                    <template #reference>
                      <div
                        class="icone"
                        :class="roleSelect.length == 0 ? '' : 'active'"
                      >
                        <el-icon><Filter /></el-icon>
                      </div>
                    </template>
                    <el-select-v2
                      :teleported="false"
                      v-model="roleSelect"
                      multiple
                      collapse-tags
                      collapse-tags-tooltip
                      filterable
                      :options="allroleSelect"
                      placeholder="请选择担任角色"
                      style="width: 180px"
                      size="small"
                    >
                    </el-select-v2>
                  </el-popover>
                </div>
              </template>
            </el-table-column>
  
            <el-table-column label="承担项目工作">
              <el-table-column prop="manager" label="采购经理" width="95" />
              <el-table-column prop="procure" label="专业采购" width="95" />
              <el-table-column prop="quotation" label="投标报价" width="95" />
              <el-table-column prop="logistics" label="库房物流" width="95" />
              <el-table-column prop="expediting" label="催交其他" width="95" />
            </el-table-column>
  
            <el-table-column prop="plan" width="150" label="计划转到其他">
              <template #default="scope">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="scope.row.plan"
                  placement="top-start"
                >
                  <div
                    style="
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    "
                  >
                    {{ scope.row.plan }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
  
            <el-table-column prop="address" width="80" label="地点">
            </el-table-column>
  
            <el-table-column label="操作" fixed="right" width="75">
              <template #default="scope">
                <span
                  style="color: #1890ff; margin: 1em; margin-left: 0"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</span
                >
                <!-- <el-popconfirm
                v-if="scope.row.dataSources !== 'HLMS'&&!isVendor"
                title="确定要删除了?"
                @confirm="confirmEvent(scope.$index, scope.row)"
              >
                <template #reference>
                  <span
                    v-if="scope.row.dataSources !== 'HLMS'&&!isVendor"
                    style="color: #189eff"
                    >删除</span
                  >
                </template>
              </el-popconfirm> -->
              </template>
            </el-table-column>
          </el-table>
  
      <div style='display:flex;justify-content: flex-end;margin-top:30px;'>
            <el-pagination
           
              v-model:current-page="pageNumPerson"
              v-model:page-size="pageSizePerson"
              :page-sizes="[10, 20, 30]"
              background
              layout="pager "
              :total="personTotalNum"
              @size-change="personSizeChange23"
              @current-change="personCurrentChange23"
            />
          </div>
        
        </div>
      </div>
    </el-dialog>
  
    <el-dialog
      :close-on-click-modal="false"
      width="72%"
      v-model="dialogVisibleYMWH"
    >
      <div class="total_apply">
        <div class="header_apply">
          <div class="header_icon">
            <div>
              <el-icon><TrendCharts /></el-icon>
            </div>
            &nbsp;
  
            <div>项目维护</div>
            <div class="button">
              <el-button size="small" @click="addProjectItem" type="primary"
                >添加项目</el-button
              >
            </div>
          </div>
          <el-table :height="500" :data="XMWHTable" style="width: 100%">
            <el-table-column type="index" width="80" label="序号" />
            <el-table-column width="80" prop="projectCode" label="项目代号">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="projectName"
              label="项目名称"
            >
              <!-- <template #default="scope">
        <div   class="project_xms">
         
         <el-tooltip
         class="box-item"
         effect="dark"
         :content="scope.row.projectName"
         placement="top-start"
       >
      
       <div class="_user" > {{ scope.row.projectName}}</div>
       
       </el-tooltip>
        </div>
       </template> -->
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="address" label="地址">
            </el-table-column>
            <el-table-column prop="name" width="100" label="状态">
              <template #default="scope">
                <div v-if="scope.row.state == 0">
                  <el-tag type="info">关闭</el-tag>
                </div>
                <div v-if="scope.row.state == 1">
                  <el-tag type="success">进行中</el-tag>
                </div>
                <div v-if="scope.row.state == 2">
                  <el-tag type="danger">暂停</el-tag>
                </div>
              </template>
            </el-table-column>
  
            <el-table-column width="200" label="操作">
              <template #default="scope">
                <el-button @click="editProject(scope.row)" link type="primary"
                  >编辑</el-button
                >
  
                <el-popconfirm
                  @confirm="DelProject(scope.row)"
                  title="你确定删除吗？"
                >
                  <template #reference>
                    <el-button link type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  
    <el-dialog
      :draggable="true"
      class="my_dialog_edit"
      :close-on-click-modal="false"
      width="30%"
      @close="BeforeEditProjectClose"
      v-model="dialogVisibleYMWHEdit"
      title="项目编辑"
    >
      <div class="total_apply">
        <el-form
          ref="formEditProjectRef"
          :rules="rulesEditProject"
          :model="formEditProject"
          label-width="120px"
        >
          <el-form-item label="项目代号" prop="projectCode">
            <el-input v-model="formEditProject.projectCode" />
          </el-form-item>
          <el-form-item label="项目名称" prop="projectName">
            <el-input v-model="formEditProject.projectName" />
          </el-form-item>
          <el-form-item label="项目地址" prop="address">
            <el-input v-model="formEditProject.address" />
          </el-form-item>
          <el-form-item label="项目状态" prop="state">
            <el-select
              v-model="formEditProject.state"
              placeholder="请选择项目状态"
            >
              <el-option label="关闭" :value="0" />
              <el-option label="进行中" :value="1" />
              <el-option label="暂停" :value="2" />
            </el-select>
          </el-form-item>
        </el-form>
  
        <div class="button_edit">
          <el-button type="primary" @click="onSubmitEdit()">确定</el-button>
          &nbsp; &nbsp;
          <el-button @click="dialogVisibleYMWHEdit = fasle">取消</el-button>
        </div>
      </div>
    </el-dialog>
  
    <el-dialog
      :draggable="true"
      class="my_dialog_edit"
      :close-on-click-modal="false"
      width="30%"
      @close="BeforeAddProjectClose"
      v-model="dialogVisibleYMWHAdd"
      title="项目新增"
    >
      <div class="total_apply">
        <el-form
          ref="formAddProjectRef"
          :rules="rulesEditProject"
          :model="formAddProject"
          label-width="120px"
        >
          <el-form-item label="项目代号" prop="projectCode">
            <el-input
              v-model="formAddProject.projectCode"
              placeholder="请输入项目代号"
            />
          </el-form-item>
          <el-form-item label="项目名称" prop="projectName">
            <el-input
              v-model="formAddProject.projectName"
              placeholder="请输入项目名称"
            />
          </el-form-item>
          <el-form-item label="项目地址" prop="address">
            <el-input
              v-model="formAddProject.address"
              placeholder="请输入项目地址"
            />
          </el-form-item>
          <el-form-item label="项目状态" prop="state">
            <el-select
              v-model="formAddProject.state"
              placeholder="请选择项目状态"
            >
              <el-option label="关闭" :value="0" />
              <el-option label="进行中" :value="1" />
              <el-option label="暂停" :value="2" />
            </el-select>
          </el-form-item>
        </el-form>
  
        <div class="button_edit">
          <el-button type="primary" @click="onSubmitAdd()">确定</el-button>
          &nbsp; &nbsp;
          <el-button @click="dialogVisibleYMWHAdd = fasle">取消</el-button>
        </div>
      </div>
    </el-dialog>
  
    <el-dialog
      :draggable="true"
      class="my_dialog_edit"
      :close-on-click-modal="false"
      width="30%"
      @close="BeforeshowEditClose"
      v-model="showEdit"
      title="人员维护"
    >
      <div class="total_apply">
        <el-form ref="showEditRef" :model="formShowEdit" label-width="120px">
          <el-form-item label="姓名">
            <el-input
              disabled
              v-model="formShowEdit.name"
              placeholder="请输入项目代号"
            />
          </el-form-item>
          <el-form-item label="工作饱满程度">
            <el-select v-model="formShowEdit.remaining">
              <el-option
                v-for="(item, index) in [
                  {
                    value: 4,
                    label: '非常饱满',
                  },
                  {
                    value: 3,
                    label: '饱满',
                  },
                  {
                    value: 2,
                    label: '一般',
                  },
                  {
                    value: 1,
                    label: '不饱满',
                  },
                ]"
                :key="index"
                :value="item.value"
                :label="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="专业采购">
            <el-input
              v-model="formShowEdit.procure"
              placeholder="请输入专业采购"
            />
          </el-form-item>
          <el-form-item label="报价投标">
            <el-input
              v-model="formShowEdit.quotation"
              placeholder="请输入报价投标"
            />
          </el-form-item>
          <el-form-item label="库房物流">
            <el-input
              v-model="formShowEdit.logistics"
              placeholder="请输入库房物流"
            />
          </el-form-item>
          <el-form-item label="催交其他">
            <el-input
              v-model="formShowEdit.expediting"
              placeholder="请输入催交其他"
            />
          </el-form-item>
          <el-form-item label="计划转项目">
            <el-input
              v-model="formShowEdit.plan"
              placeholder="请输入计划转到其他项目"
            />
          </el-form-item>
          <el-form-item label="目前地址">
            <el-input
              v-model="formShowEdit.address"
              placeholder="请输入目前地址"
            />
          </el-form-item>
        </el-form>
  
        <div class="button_edit">
          <el-button type="primary" @click="onSubmitShowEdit(formShowEdit)"
            >确定</el-button
          >
          &nbsp; &nbsp;
          <el-button @click="showEdit = fasle">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </template>
  
  <script setup>
  import filterCom from "../components/filter.vue";
  import AMapLoader from "@amap/amap-jsapi-loader"; // 使用加载器加载JSAPI，可以避免异步加载、重复加载等常见错误加载错误
  import Echart from "../components/echart";
  import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    ChatDotRound,
    Star,
    Avatar,
    MessageBox,
    Switch,
    Right,
    OfficeBuilding,
    UserFilled,
    Document,
    Download,
  } from "@element-plus/icons-vue";
  
  import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
  import {
    allHTQD,
    DelProjectData,
    getAllCom,
    getCJData,
    getTable,
    getProjectMapAndData,
    getPersonData,
    getContractData,
    getContractMapData,
    getRYFBData,
    getRYFBMapData,
    EchartsDataGYS,
    getAllPriject,
    applySubmit,
    applyProcess,
    applyPersonData,
    applyPersonDBFN,
    addTree,
    delTree,
    changeTree,
    changeTreeBody,
    submitPersonTable,
    applyPersonTG,
    changeState,
    checkAllDataPerson,
    EchartsDataREFB,
    getUserRole,
    EchartsDataXMFB,
    getCJBottomData,
    getSubmitComment,
    submitEditProjectData,
    submitAddProjectData,
    submitPersonWH,
    DC,
    allWorkCodeData,
    applyPersonHistory,
  } from "../https/api/construct.js";
  import { ElMessage, ElNotification } from "element-plus";
  
  let getallWorkCodeData = async (data) => {
    RYlOADING.value = false;
    let res = await allWorkCodeData(data);
    allWorkCode.value = res.data.map((v) => {
      return {
        value: v.value,
        label: v.value,
      };
    });
  };
  
  let allWorkCode = ref([]);
  let workCode = ref([]);
  let chooseworkCode = (val) => {
    workCode.value = val;
  };
  
  
  let projectCodeSelect = ref([])
  
  
  
  let dialogVisibleDBSX = ref(false);
  
  let dialogVisibleRYSQ = ref(false);
  let dialogVisibleApply = ref(false);
  
  let getEchartsDataGYS = async (data) => {
    let res = await EchartsDataGYS(data);
    if (res.code == 200) {
      GYSData.value.series[0].data = res.data.map((v) => {
        return {
          name: v.projectsName,
          value: v.vendorNum,
        };
      });
    }
  };
  
  let onSubmitShowEdit = async (data) => {
    let res = await submitPersonWH(data);
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "修改成功",
      });
      showEdit.value = false;
      RYXQShowFn(1);
    }
  };
  
  let formShowEdit = ref({});
  
  let showEdit = ref(false);
  let showEditRef = ref("");
  
  let BeforeshowEditClose = () => {
    showEditRef.value.resetFields();
  };
  
  let handleEdit = (index, row) => {
    formShowEdit.value = {
      ...row,
    };
    showEdit.value = true;
  };
  
  let tableSpanMethod = ({ rowIndex, columnIndex }) => {
    if (columnIndex === 0) {
      return {
        rowspan: spanTable(
          createSpanrowData(applyTableSubmit2.value, ["applyName"]),
          rowIndex
        ).rowspan,
        colspan: 1,
      };
    }
    if (columnIndex === 1) {
      return {
        rowspan: spanTable(
          createSpanrowData(applyTableSubmit2.value, ["applyName", "applyTime"]),
          rowIndex
        ).rowspan,
        colspan: 1,
      };
    }
  };
  
  let tableSpanMethod3 = ({ rowIndex, columnIndex }) => {
    if (columnIndex === 0) {
      return {
        rowspan: spanTable(
          createSpanrowData(applyTableSubmit3.value, ["applyName"]),
          rowIndex
        ).rowspan,
        colspan: 1,
      };
    }
    if (columnIndex === 1) {
      return {
        rowspan: spanTable(
          createSpanrowData(applyTableSubmit3.value, ["applyName", "applyTime"]),
          rowIndex
        ).rowspan,
        colspan: 1,
      };
    }
  };
  
  let tableSpanMethod2 = ({ rowIndex, columnIndex }) => {
    if (columnIndex === 0) {
      return {
        rowspan: spanTable(
          createSpanrowData(XQTable.value, ["personCode"]),
          rowIndex
        ).rowspan,
        colspan: 1,
      };
    }
    if (columnIndex === 1) {
      return {
        rowspan: spanTable(
          createSpanrowData(XQTable.value, ["personCode", "name"]),
          rowIndex
        ).rowspan,
        colspan: 1,
      };
    }
    if (columnIndex === 2) {
      return {
        rowspan: spanTable(
          createSpanrowData(XQTable.value, ["personCode", "name", "workCode"]),
          rowIndex
        ).rowspan,
        colspan: 1,
      };
    }
    if (columnIndex === 3) {
      return {
        rowspan: spanTable(
          createSpanrowData(XQTable.value, [
            "personCode",
            "name",
            "workCode",
            "title",
          ]),
          rowIndex
        ).rowspan,
        colspan: 1,
      };
    }
    if (columnIndex === 4) {
      return {
        rowspan: spanTable(
          createSpanrowData(XQTable.value, [
            "personCode",
            "name",
            "workCode",
            "title",
            "type",
          ]),
          rowIndex
        ).rowspan,
        colspan: 1,
      };
    }
    if (columnIndex === 5) {
      return {
        rowspan: spanTable(
          createSpanrowData(XQTable.value, [
            "personCode",
            "name",
            "workCode",
            "title",
            "type",
            "remaining",
          ]),
          rowIndex
        ).rowspan,
        colspan: 1,
      };
    }
    if (columnIndex === 6) {
      return {
        rowspan: spanTable(
          createSpanrowData(XQTable.value, [
            "personCode",
            "name",
            "workCode",
            "title",
            "type",
            "remaining",
            "projectNum",
          ]),
          rowIndex
        ).rowspan,
        colspan: 1,
      };
    }
  
    if (columnIndex === 13) {
      return {
        rowspan: spanTable(
          createSpanrowData(XQTable.value, [
            "personCode",
            "name",
            "workCode",
            "title",
            "type",
            "remaining",
            "projectNum",
            "",
            "",
            "",
            "",
            "",
            "",
            "manager",
          ]),
          rowIndex
        ).rowspan,
        colspan: 1,
      };
    }
    if (columnIndex === 14) {
      return {
        rowspan: spanTable(
          createSpanrowData(XQTable.value, [
            "personCode",
            "name",
            "workCode",
            "title",
            "type",
            "remaining",
            "projectNum",
            "",
            "",
            "",
            "",
            "",
            "",
            "manager",
            "procure",
          ]),
          rowIndex
        ).rowspan,
        colspan: 1,
      };
    }
    if (columnIndex === 15) {
      return {
        rowspan: spanTable(
          createSpanrowData(XQTable.value, [
            "personCode",
            "name",
            "workCode",
            "title",
            "type",
            "remaining",
            "projectNum",
            "",
            "",
            "",
            "",
            "",
            "",
            "manager",
            "procure",
            "quotation",
          ]),
          rowIndex
        ).rowspan,
        colspan: 1,
      };
    }
    if (columnIndex === 16) {
      return {
        rowspan: spanTable(
          createSpanrowData(XQTable.value, [
            "personCode",
            "name",
            "workCode",
            "title",
            "type",
            "remaining",
            "projectNum",
            "",
            "",
            "",
            "",
            "",
            "",
            "manager",
            "procure",
            "quotation",
            "logistics",
          ]),
          rowIndex
        ).rowspan,
        colspan: 1,
      };
    }
    if (columnIndex === 17) {
      return {
        rowspan: spanTable(
          createSpanrowData(XQTable.value, [
            "personCode",
            "name",
            "workCode",
            "title",
            "type",
            "remaining",
            "projectNum",
            "",
            "",
            "",
            "",
            "",
            "",
            "manager",
            "procure",
            "quotation",
            "logistics",
            "expediting",
          ]),
          rowIndex
        ).rowspan,
        colspan: 1,
      };
    }
    if (columnIndex === 18) {
      return {
        rowspan: spanTable(
          createSpanrowData(XQTable.value, [
            "personCode",
            "name",
            "workCode",
            "title",
            "type",
            "remaining",
            "projectNum",
            "",
            "",
            "",
            "",
            "",
            "",
            "manager",
            "procure",
            "quotation",
            "logistics",
            "expediting",
            "plan",
          ]),
          rowIndex
        ).rowspan,
        colspan: 1,
      };
    }
    if (columnIndex === 19) {
      return {
        rowspan: spanTable(
          createSpanrowData(XQTable.value, [
            "personCode",
            "name",
            "workCode",
            "title",
            "type",
            "remaining",
            "projectNum",
            "",
            "",
            "",
            "",
            "",
            "",
            "manager",
            "procure",
            "quotation",
            "logistics",
            "expediting",
            "plan",
            "address",
          ]),
          rowIndex
        ).rowspan,
        colspan: 1,
      };
    }
  };
  
  // el-table合并规则，从合并开始行向下合并，被合并的行需返回rowspan:0，否则会导致列混乱
  const spanTable = (spanArr, rowIndex) => {
    if (spanArr !== null && spanArr.length > 0) {
      for (let j = 0; j < spanArr.length; j++) {
        for (let i = 0; i < spanArr[j].spanLength; i++) {
          // 如果当前行是构造好的合并行数据的开始行，则返回rowspan:合并数据的合并行数量
          if (rowIndex === spanArr[j].fromIndex) {
            return {
              rowspan: spanArr[j].spanLength,
              colspan: 1,
            };
          } else if (
            rowIndex > spanArr[j].fromIndex &&
            rowIndex < spanArr[j].spanLength + spanArr[j].fromIndex
          ) {
            // 如果当前行大于构造好的合并行数据的开始行，小于合并行数据的开始行+合并数据的合并行数量，则返回rowspan:0
            return {
              rowspan: 0,
              colspan: 1,
            };
          }
        }
      }
    }
  };
  
  const createSpanrowData = (paramData, propName) => {
    if (paramData !== null && paramData.length > 0) {
      let oneArr = [];
      let currentValue = "";
      let tempFromIndex = 0;
      let tempRowspan = 1;
      for (let i = 0; i < paramData.length; i++) {
        let tempValue = "";
        // 循环propName属性数组，拼接需要合并的级联连属性
        for (let j = 0; j < propName.length; j++) {
          tempValue += paramData[i][propName[j]];
        }
        if (currentValue === tempValue) {
          // 如果当前行与上一行列属性值相同，则合并行+1
          tempRowspan++;
        } else {
          // 如果当前行与上一行列属性值不同，则更新当前行数据，添加前一组的合并参数到数组中
          currentValue = tempValue;
          if (i !== 0) {
            oneArr.push({ fromIndex: tempFromIndex, spanLength: tempRowspan });
          }
          // 并重置合并行为默认值1，更新合并开始行为当前行i
          tempRowspan = 1;
          tempFromIndex = i;
        }
      }
      // 添加最后一组合并参数到数组中
      oneArr.push({ fromIndex: tempFromIndex, spanLength: tempRowspan });
      return oneArr;
    }
  };
  
  let TG = async (data) => {
    let res = await applyPersonTG({
      approveStep: showType.value,
  
      approveAction: 1,
  
      approveMsg: "",
  
      approveId: data.approveId,
    });
    if (res.code == 200) {
      let res_2 = await applyPersonDBFN({
        username: JSON.parse(sessionStorage.getItem("userInfo"))?.user.name,
        type: 0,
      });
      applyTableSubmit2.value = res_2.data;
      ElMessage({
        type: "success",
        message: "审批通过",
      });
    }
  };
  
  let BHReason = ref("");
  let BH = async (data) => {
    if (!BHReason.value) {
      ElMessage({
        type: "error",
        message: "请填写驳回原因",
      });
      return;
    }
  
    document.querySelector(".header_icon").click();
    let res = await applyPersonTG({
      approveStep: showType.value,
  
      approveAction: 0,
  
      approveMsg: BHReason.value,
  
      approveId: data.approveId,
    });
  
    if (res.code == 200) {
      BHReason.value = "";
      let res_2 = await applyPersonDBFN({
        username: JSON.parse(sessionStorage.getItem("userInfo"))?.user.name,
        type: 0,
      });
      applyTableSubmit2.value = res_2.data;
  
      ElMessage({
        type: "success",
        message: "驳回成功",
      });
    }
  };
  
  let pj_input = ref([]);
  let pj_show = ref(false);
  let PJRef = ref("");
  
  let EditTET = (item, index, data) => {
    // pj_show.value = true
    data.forEach((v) => {
      v.pj_show = false;
    });
    item.pj_show = true;
    setTimeout(() => {
      PJRef.value[0]?.focus();
    }, 200);
  };
  
  let handleSelectChangePJ = (item, index, data) => {
    console.log(item, data);
  };
  
  let QS_subimt = async (data, item) => {
    data.forEach((v) => {
      v.pj_show = false;
    });
  
    PJRef.value[0]?.blur();
    console.log(item);
    let res = await getSubmitComment({ ...item, comment: item.Assessment });
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "评价成功",
      });
    }
  };
  
  let currentTimeFn = () => {
    // 创建 Date 对象获取当前时间
    let currentDate = new Date();
  
    // 获取年、月、日、小时和分钟
    let year = currentDate.getFullYear();
    let month = String(currentDate.getMonth() + 1).padStart(2, "0");
    let day = String(currentDate.getDate()).padStart(2, "0");
    let hours = String(currentDate.getHours()).padStart(2, "0");
    let minutes = String(currentDate.getMinutes()).padStart(2, "0");
  
    // 格式化时间字符串
    let formattedTime = `${year}-${month}-${day} ${hours}:${minutes}`;
    return formattedTime;
  };
  
  let GYSData = ref({
    tooltip: {
      trigger: "item",
    },
    legend: {
      show: false,
    },
    series: [
      {
        name: "供应商数量",
        type: "pie",
        radius: ["60%", "90%"],
  
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          fontWeight: 800,
          formatter: "供应商数量占比",
          fontSize: 14,
          position: "center",
        },
  
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads2" },
        ],
      },
    ],
  });
  
  let applyPersonDB = ref("");
  let applyTimeDB = ref("");
  let applyTableProcess = ref([]);
  
  let SPPageNum = ref(1);
  let SPPageSize = ref(20);
  let SPtotalPage = ref(1);
  
  let SPPageNum2 = ref(1);
  let SPPageSize2 = ref(20);
  let SPtotalPage2 = ref(1);
  
  let currentState = ref("");
  
  let selectId = ref(null);
  
  watch(selectId, async () => {
    if (selectId.value) {
      let res = await applyProcess({
        pageNum: 0,
        pageSize: -1,
        selectId: selectId.value,
      });
      applyTableProcess.value = res.data;
      SPtotalPage.value = res.total;
    } else {
      let res = await applyProcess({
        pageNum: 0,
        pageSize: -1,
        selectId: selectId.value,
      });
      applyTableProcess.value = res.data;
      SPtotalPage.value = res.total;
    }
  });
  
  let SPCurrentChange = async (val) => {
    SPPageNum.value = val;
    let res = await applyProcess({
      pageNum: 0,
      pageSize: -1,
      selectId: selectId.value,
    });
    applyTableProcess.value = res.data;
    SPtotalPage.value = res.total;
  };
  
  let SPSizeChange = async (val) => {
    SPPageSize.value = val;
    let res = await applyProcess({
      pageNum: 0,
      pageSize: -1,
      selectId: selectId.value,
    });
    applyTableProcess.value = res.data;
    SPtotalPage.value = res.total;
  };
  
  let SPCurrentChange2 = async (val) => {
    SPPageNum2.value = val;
    // let res = await applyProcess({pageNum:0,pageSize:-1,selectId:selectId.value})
    // applyTableProcess.value = res.data
    // SPtotalPage.value = res.total
  };
  
  let SPSizeChange2 = async (val) => {
    SPPageSize2.value = val;
    // let res = await applyProcess({pageNum:0,pageSize:-1,selectId:selectId.value})
    // applyTableProcess.value = res.data
    // SPtotalPage.value = res.total
  };
  
  let mouseenterTable = async (row) => {
    console.log(row);
    selectId.value = row.id;
  };
  
  let showType = ref("");
  let checkView = async (data) => {
    dialogVisibleApply.value = false;
  
    let res = await applyPersonDBFN({
      username: JSON.parse(sessionStorage.getItem("userInfo"))?.user.name,
      type: 0,
    });
    let res_2 = await applyProcess({
      pageNum: 0,
      pageSize: -1,
      selectId: selectId.value,
    });
    if (res.code == 200) {
      dialogVisibleDBSX.value = true;
      showType.value = res.type;
      applyTableSubmit2.value = res.data;
      applyTableProcess.value = res_2.data;
      SPtotalPage.value = res_2.total;
    }
  };
  
  let HTQDData = ref({
    tooltip: {
      trigger: "item",
    },
    legend: {
      show: false,
    },
    series: [
      {
        name: "合同数量",
        type: "pie",
        radius: ["60%", "90%"],
  
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          fontWeight: 800,
          formatter: "合同数量占比",
          fontSize: 14,
          position: "center",
        },
  
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "安徽天浦建筑工程有限公司" },
          { value: 735, name: "上海和晟仪器科技有限公司" },
          { value: 580, name: "TSV GLOBAL SOLUTIONS PVT LTD." },
          { value: 484, name: "Union Ads2" },
        ],
      },
    ],
  });
  
  let showNEW1 = ref(true);
  let showNEW2 = ref(false);
  
  let applyTableSubmit3 = ref([]);
  
  let gotoNEWpAGE = async (num) => {
    if (num == 1) {
      showNEW1.value = true;
      showNEW2.value = false;
    }
    if (num == 2) {
      showNEW1.value = false;
      showNEW2.value = true;
    }
  };
  
  let RYData = ref({
    title: {
      text: "项目人员分布情况",
      textStyle: {
        color: "#0081ff",
      },
      show: false,
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      show: false,
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        labelLine: {
          show: true,
  
          length: 1,
        },
  
        name: "",
        type: "pie",
        radius: ["45%", "65%"], // 设置内外半径
        center: ["50%", "60%"], // 设置中心位置
        tooltip: {
          trigger: "item",
          formatter: "项目名称：{b} <br/> 人员数量：{c}人",
        },
        label: {
          position: "outside",
        },
  
        data: [
          {
            value: 1048,
            name: "弘元能源科技（包头）有限公司高纯晶硅（一期）项目",
          },
          {
            value: 735,
            name: "连云港圣奥化学科技有限公司聚合物添加剂项目（一期）",
          },
          { value: 752, name: "21811项目" },
          { value: 452, name: "公司本部" },
          { value: 231, name: "广西华谊项目" },
          { value: 220, name: "江苏中能硅业科技发展有限公司高纯颗粒硅技改项目" },
          { value: 240, name: "内蒙古三维新材料有限公司BDO一体化项目" },
          { value: 24, name: "内蒙古鑫元硅材料科技有限公司年产10万吨颗粒硅项目" },
          { value: 800, name: "青海南玻" },
          { value: 452, name: "青海盐湖佛照蓝科锂业2万/年吨电池级碳酸锂项目" },
          { value: 123, name: "陕煤集团榆林化学有限公司180万吨/年乙二醇项目" },
          {
            value: 280,
            name: "陕西龙华集团煤业科技发展有限公司煤炭分级分质清洁高效综合利用项目",
          },
          { value: 788, name: "同德科创材料有限公司PBAT新材料产业链一体化项目" },
  
          { value: 588, name: "万华PDH" },
          {
            value: 68,
            name: "万华化学（福建）异氰酸酯有限公司40万吨/年MDI项目低温乙烯罐项目",
          },
          {
            value: 18,
            name: "万华化学（四川）有限公司眉山NMP项目新华半导体项目",
          },
          {
            value: 38,
            name: "新疆宣东35万吨/年轻质煤焦油深加工项目（二期）EPC总承包",
          },
          {
            value: 128,
            name: "新疆中泰新材料股份有限公司资源化综合利用制甲醇升级示范项目净化装置",
          },
          {
            value: 68,
            name: "兖矿新疆煤化工有限公司年产6万吨三聚氰胺项目云南氟化氢",
          },
          { value: 578, name: "重庆气凝胶项目" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });
  
  let RYSQData = ref({
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
      // doesn't perfectly work with our tricks, disable it
      selectedMode: false,
      show: true,
    },
  
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["60%", "100%"],
        center: ["50%", "90%"],
        // adjust the start angle
        startAngle: 180,
        label: {
          show: true,
          formatter(param) {
            // correct the percentage
            return param.name + " (" + param.percent * 2 + "%)";
          },
        },
        data: [
          { value: 735, name: "离岗人员" },
          { value: 580, name: "在岗人员" },
          { value: 484, name: "在项（到岗）" },
          { value: 300, name: "在项（未到岗）" },
          {
            // make an record to fill the bottom 50%
            value: 735 + 580 + 484 + 300,
            itemStyle: {
              // stop the chart from rendering this piece
              color: "none",
              decal: {
                symbol: "none",
              },
            },
            label: {
              show: false,
            },
          },
        ],
      },
    ],
  });
  
  let DCRYWH = async () => {
    let res = await DC({ workCode: workCode.value });
    if ((res.code = 200)) {
      var x = new XMLHttpRequest();
      x.open("GET", `http://10.6.70.105:8034${res.path}`, true);
      x.responseType = "blob";
      x.onload = function (e) {
        var url = window.URL.createObjectURL(x.response);
        var a = document.createElement("a");
        a.href = url;
        a.download = "人员信息";
        a.click();
      };
      x.send();
    }
  };
  
  let FZName = ref("");
  
  let sendDrop = async (draggingNode, dropNode) => {
    await changeTreeBody({
      projectId: draggingNode.data.projectId,
      nodeId: dropNode.data.id,
    });
  };
  
  const allowDrop = (draggingNode, dropNode, type) => {
    if (
      draggingNode.data.type == "children" &&
      dropNode.data.type == "children"
    ) {
      return false;
    } else if (
      draggingNode.data.type == "parent" &&
      dropNode.data.type == "parent"
    ) {
      return false;
    } else if (
      draggingNode.data.type == "parent" &&
      dropNode.data.type == "children"
    ) {
      return false;
    } else if (
      draggingNode.data.type == "children" &&
      dropNode.data.type == "parent"
    ) {
      return type == "inner";
    } else {
      return true;
    }
  };
  const allowDrag = (draggingNode) => {
    return true;
  };
  
  let clickTreeNode = (TreeNode) => {
    if (TreeNode.type == "children") {
      projectMapAndData.value = [TreeNode];
  
      document.querySelector(".tree_box").style.zIndex = -1;
      towPageDrag.value = true;
      xzfb_div.value = false;
      tabCard.value.forEach((v) => {
        v.checked = false;
      });
      tabCard.value[0].checked = true;
      showRY();
      rowClick(TreeNode);
    }
  };
  
  let appendD = async () => {
    if (FZName.value) {
      let res = await addTree({
        username: JSON.parse(sessionStorage.getItem("userInfo"))?.user.name,
        nodename: FZName.value,
      });
      if (res.code == 200) {
        popoverRefc.value.hide();
        getTreeData({
          username: JSON.parse(sessionStorage.getItem("userInfo"))?.user.name,
        });
        FZName.value = "";
      }
  
      //     let data = {
      //   label:FZName.value,
      //   type:'parent',
      //   children:[]
      //  }
      //  dragDataXM.value.push(data)
      //  console.log(dragDataXM.value)
      // setTimeout(()=>{
      //   document.querySelectorAll('.parentNodes').forEach(v=>{
  
      //       v.addEventListener('mouseenter',(e)=>{
      //         e.target.querySelector('.button_show2').style.visibility = 'visible'
      //         e.target.querySelector('.button_show').style.visibility = 'visible'
      //       })
      //       v.addEventListener('mouseleave',(e)=>{
      //         e.target.querySelector('.button_show2').style.visibility = 'hidden'
      //         e.target.querySelector('.button_show').style.visibility = 'hidden'
      //       })
      //      })
      // },200)
    } else {
      ElMessage({
        type: "error",
        message: "输入分组名",
      });
    }
  };
  
  let popoverRefc = ref("");
  let canelD = () => {
    FZName.value = "";
    popoverRefc.value.hide();
  };
  
  let inputShow = ref(false);
  let input_Data = ref();
  let changeD = (node, data) => {
    input_Data.value = data.id;
    console.log(node, data);
    inputShow.value = true;
  };
  let changeD2 = async (node, data) => {
    let res = await changeTree({ nodeId: data.id, nodename: data.label });
    if (res.code == 200) {
      console.log(node, data);
      getTreeData({
        username: JSON.parse(sessionStorage.getItem("userInfo"))?.user.name,
      });
      inputShow.value = false;
    }
  };
  
  let removeD = async (node, data) => {
    if (data.children.length >= 1) {
      ElMessage({
        type: "error",
        message: "已有项目，无法删除",
      });
      return;
    }
  
    let res = await delTree({ id: data.id });
    if (res.code == 200) {
      getTreeData({
        username: JSON.parse(sessionStorage.getItem("userInfo"))?.user.name,
      });
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    }
    // const parent = node.parent
  
    // const children= parent.data.children || parent.data
  
    // const index = children.findIndex((d) => d.label === data.label)
  
    // children.splice(index, 1)
    // dragDataXM.value = [...dragDataXM.value]
  };
  
  let dragDataXM = ref([
    {
      label: "所有项目",
      type: "parent",
      children: [
        {
          label: "内蒙古自治区包头市九原区工业园区",
          type: "children",
          address: "内蒙古自治区包头市九原区工业园区",
          externalMan: 3,
          formalMan: 9,
          manager: "红华采",
          onDuty: 10,
          position: [109.715345, 40.590542],
          projectCode: "22015",
          projectId: 3,
          projectName: "内蒙大全十万吨多晶硅数字化交付",
          state: "进行中",
          totalInput: 12,
        },
      ],
    },
  ]);
  
  watch(
    dragDataXM,
    () => {
      nextTick(() => {
        if (document.querySelector(".box_show")) {
          document.querySelector(".box_show").style.height =
            document.querySelector(".tree_box")?.clientHeight + +10 + "px";
        }
      });
    },
    { deep: true }
  );
  
  let select_apply2 = ref("");
  let focus_select = (e) => {
    // setTimeout(() =>{
    //   // console.log(select_apply2.value)
    //  let  ele = document.querySelector('.el-select')
    // //  console.log(select_apply2.value.popperPaneRef)
    // //  console.log(ele.getBoundingClientRect().left)
    // //  select_apply2.value.popperPaneRef.style.inset = `${ele.getBoundingClientRect().top + +43}px auto auto ${ele.getBoundingClientRect().left}px`
    //  select_apply.value.popperPaneRef.style.inset = `${ele.getBoundingClientRect().top + +43}px auto auto ${ele.getBoundingClientRect().left}px`
    // },1000)
  };
  
  let points = ref([]);
  
  let HT_div = ref(false);
  
  let AMap;
  let map;
  let init = async () => {
    let res = await AMapLoader.load({
      key: "4056aa1b76794cdb8df1d5ee0000bdb8&&plugin=AMap.Scale,AMap.HawkEye,AMap.ToolBar,AMap.InfoWindow,AMap.ControlBar,AMap.PlaceSearch,AMap.DistrictSearch,AMap.HeatMap,AMap.3DTilesLayer,AMap.IndoorMap,AMap.MoveAnimation,AMap.ElasticMarker,AMap.MarkerClusterer,AMap.IndexCluster,AMap.MouseTool,AMap.BezierCurveEditor,AMap.RectangleEditor,AMap.CircleEditor,AMap.EllipseEditor,AMap.GeoJSON,AMap.PolylineEditor,AMap.PolygonEditor,AMap.AutoComplete,AMap.Driving,AMap.Walking,AMap.Riding,AMap.Transfer,AMap.Geocoder,AMap.GraspRoad,AMap.StationSearch,AMap.LineSearch,AMap.ArrivalRange,AMap.CitySearch,AMap.Geolocation,AMap.Weather,AMap.RangingTool", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [
        "AMap.IndexCluster",
        "AMap.ToolBar",
        "AMap.Scale",
        "AMap.HawkEye",
        "AMap.MapType",
        "AMap.Geolocation",
        "AMap.PlaceSearch",
        "AMap.InfoWindow",
      ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    });
    AMap = res;
    map = new AMap.Map("map", {
      resizeEnable: true,
      zoom: 5,
      pitchEnable: true,
    });
  
    return map ? map : "123";
  };
  
  let personInput = ref("");
  let contractInput = ref("");
  
  let vendorMapPageNum = ref(1);
  let vendorMapPageSize = ref(20);
  let vendorMapTotal = ref(1);
  let vendorMapSizeChange = async (val) => {
    vendorMapPageSize.value = val;
    let res = await getCJData({
      projectId: selectProject.value,
      pageSize: vendorMapPageSize.value,
      pageNum: vendorMapPageNum.value,
      vendorName: vendorName.value,
    });
    CJData.value = res.data.map((v) => {
      return {
        ...v,
        showItem: false,
      };
    });
    vendorMapTotal.value = res.total;
  };
  let vendorMapCurrentChange = async (val) => {
    vendorMapPageNum.value = val;
    let res = await getCJData({
      projectId: selectProject.value,
      pageSize: vendorMapPageSize.value,
      pageNum: vendorMapPageNum.value,
      vendorName: vendorName.value,
    });
    CJData.value = res.data.map((v) => {
      return {
        ...v,
        showItem: false,
      };
    });
    vendorMapTotal.value = res.total;
  };
  
  let personCurrentChange = (val) => {
    personPageNum.value = val;
    getPersonDataData({
      projectId: projectId.value,
      name: personName.value,
      pageNum: personPageNum.value,
      pageSize: personPageSize.value,
    });
  };
  
  let personSizeChange = (val) => {
    personPageSize.value = val;
    getPersonDataData({
      projectId: projectId.value,
      name: personName.value,
      pageNum: personPageNum.value,
      pageSize: personPageSize.value,
    });
  };
  
  let personFBName = ref("");
  
  watch(personFBName, () => {
    getRTFB({
      pageNum: 0,
      personName: personFBName.value,
      pageSize: -1,
    });
  });
  
  let personFBPageNum = ref(1);
  let personFBPageSize = ref(20);
  let personFBSizeChange = (val) => {
    personFBPageSize.value = val;
    getRTFB({
      pageNum: personFBPageNum.value,
      personName: personFBName.value,
      pageSize: personFBPageSize.value,
    });
  };
  let personFBCurrentChange = (val) => {
    personFBPageNum.value = val;
    getRTFB({
      pageNum: personFBPageNum.value,
      personName: personFBName.value,
      pageSize: personFBPageSize.value,
    });
  };
  
  let showFH = () => {
    document.querySelector(".left_button_box").style.visibility = "hidden";
    getDataS("项目分布");
  };
  
  let contractPageNum = ref(1);
  let contractPageSize = ref(20);
  let contractCurrentChange = (val) => {
    contractPageNum.value = val;
  };
  
  let contractSizeChange = (val) => {
    contractPageSize.value = val;
  };
  
  let personName = ref("");
  
  watch(personName, () => {
    getPersonDataData({
      projectId: projectId.value,
      name: personName.value,
      pageNum: 0,
      pageSize: -1,
    });
  });
  
  let xm_Dragg = ref(false);
  let cj_setion = ref(false);
  
  let projectName = ref("");
  
  let tableData = ref([]);
  
  var count = 70000;
  
  let RY_div = ref(false);
  let showRY = () => {
    xzfb_div.value = false;
    towPageDrag.value = false;
    RY_div.value = true;
    HT_div.value = false;
  };
  
  let goBackMap = () => {
    map.setCenter([108.947166, 34.268694]); // 设置地图中心点
  
    map.setZoom(5); // 设置地图层级
  };
  
  var _renderClusterMarker = function (context) {
    var factor = Math.pow(context.count / count, 1 / 18);
    var div = document.createElement("div");
    var Hue = 180 - factor * 180;
    var bgColor = "hsla(" + Hue + ",100%,40%,0.7)";
    var fontColor = "hsla(" + Hue + ",100%,90%,1)";
    var borderColor = "hsla(" + Hue + ",100%,40%,1)";
    var shadowColor = "hsla(" + Hue + ",100%,90%,1)";
    div.style.backgroundColor = bgColor;
    var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
    div.style.width = div.style.height = size + "px";
    div.style.border = "solid 1px " + borderColor;
    div.style.borderRadius = size / 2 + "px";
    div.style.boxShadow = "0 0 5px " + shadowColor;
    div.innerHTML = context.count;
    div.style.lineHeight = size + "px";
    div.style.color = fontColor;
    div.style.fontSize = "14px";
    div.style.textAlign = "center";
    context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
    context.marker.setContent(div);
  };
  var _renderMarker = function (context) {
    let zoom = map.getZoom(); // 获取当前地图级别
  
    if (zoom >= 7) {
      let content = `
     <div class='tips_ie' style="background-color: white;border-radius: 0.4rem; padding:8px;font-size:11px;width:250px;  box-shadow:0 2px 6px 0 rgba(114, 124, 245, .5) ;text-align: left;">
       <p style='font-weight:800;line-height:15px;'>公司：${context.data[0].community}</p>
       <p style='margin-top:10px;line-height:15px;'>地址：${context.data[0].building}</p>
       <p style='margin-top:10px'>联系电话：${context.data[0].Bh}</p>
       <div class='sanjioaxin' style=' position: absolute;
       color: #000;
       position: absolute;
       color: #0e89f5;
      position: absolute;
      margin-left: 4px;
      margin-top: 2px;
      width: 15px;
      height: 15px;
      border: solid 1px currentColor;
      border-radius: 20px 20px 20px 0;
    background-color: currentColor;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 117px;
      left: 42%; 
        '></div
      </div>
       
    `;
      let offset = new AMap.Pixel(-100, -100);
      context.marker.setContent(content);
      context.marker.setOffset(offset);
    } else {
      let content = `
      <div style="text-align: center;font-size: 14px;line-height: 43px;border-radius: 21.5px; width: 43px;height: 43px;color: white;    background-color: rgb(103 238 16);">
      1
      </div>
       
    `;
  
      context.marker.setContent(content);
    }
  };
  
  let getData = async (data) => {
    console.log(data);
    let res = await getAllCom(data);
    if (res.code == 200) {
      points.value = res.data;
      return res.data;
    }
  };
  
  let copyData = ref([]);
  let typeSelect_s = ref("全部");
  watch(typeSelect_s, () => {
    if (typeSelect_s.value == "全部") {
      projectSelectOption.value = copyData.value.filter((v) => v);
    } else {
      projectSelectOption.value = copyData.value.filter((v) => v.state == 1);
    }
  });
  
  let showHT = () => {
    HT_div.value = true;
    towPageDrag.value = false;
    xzfb_div.value = false;
    RY_div.value = false;
  };
  
  let buttonRefBH = ref("");
  let popoverRefBH = ref("");
  let canelBH = () => {
    BHReason.value = "";
    popoverRefBH.value.hide();
  };
  
  let pageSize = ref(20);
  let pageNum = ref(1);
  let total = ref(1);
  let projectInput = ref("");
  let GYSInput = ref("");
  let XMInput = ref("");
  let activeRight = ref(1920);
  
  let UserShow = ref(false);
  let getUserMESSAGE = async () => {
    let res = await getUserRole({});
    if (res.code == 200) {
      res.data.empRole == 2 ? (UserShow.value = true) : (UserShow.value = false);
    }
  };
  
  let timerSetInterval = ref(null);
  
  onUnmounted(() => {
    clearInterval(timerSetInterval.value);
  });
  
  onMounted(() => {
    clearInterval(timerSetInterval.value);
    timerSetInterval.value = setInterval(() => {
      if (true) {
        let element = document.querySelector(".my_map").clientWidth;
  
        activeRight.value = element - 380;
  
        if (
          document.querySelector(".tree_box") &&
          document.querySelector(".white_color") &&
          document.querySelector(".box_show")
        ) {
          document.querySelector(".tree_box").style.width =
            document.querySelector(".white_color").clientWidth + "px";
  
          document.querySelector(".box_show").style.height =
            document.querySelector(".tree_box").clientHeight + +10 + "px";
          document.querySelector(".tree_box").style.zIndex = 999;
          document.querySelector(".tree_box").style.visibility = "visible";
  
          document.querySelector(".tree_box").style.left =
            document.querySelector(".box_show").getBoundingClientRect().left +
            "px";
          document.querySelector(".tree_box").style.top =
            document.querySelector(".box_show").getBoundingClientRect().top +
            "px";
        }
      }
    }, 10);
  
    getUserMESSAGE();
    // activeRight.value = window.innerWidth - 680;
  
    document.addEventListener("mouseover", async (e) => {
      if (!document.querySelector(".header_apply")?.contains(e.target)) {
        selectId.value = null;
      }
    });
  
    new Promise(async (resolve, reject) => {
      // 修改  取消注释
      let res = await init();
      if (res) {
        // 修改  为res
  
        resolve(res); // 修改  为res
      }
    }).then(() => {
      getDataS("项目分布");
      document.addEventListener("click", (e) => {
        if (e.target.getAttribute("placeholder")?.includes("请输入人员")) {
          personInput.value.focus();
        }
        if (e.target.getAttribute("placeholder")?.includes("请输入合同")) {
          contractInput.value.focus();
        }
        if (e.target.getAttribute("placeholder")?.includes("请输入项目")) {
          projectInput.value.focus();
        }
        if (e.target.getAttribute("placeholder")?.includes("请输入供应商")) {
          GYSInput.value.focus();
        }
        if (e.target.getAttribute("placeholder")?.includes("输入评价")) {
          PJRef.value[0]?.focus();
        }
  
        if (e.target.className == "vue3-resize-drag") {
          xm_Dragg.value = true;
        } else {
          xm_Dragg.value = false;
        }
      });
  
      // createDBSX()
      getDBSX();
    });
  });
  
  let tabCard = ref([
    {
      title: "人员",
      checked: true,
      Fn: showRY,
    },
    {
      title: "合同",
      checked: false,
      Fn: showHT,
    },
    {
      title: "返回",
      checked: false,
      Fn: showFH,
    },
  ]);
  
  let projectMapAndData = ref([]);
  let stepNum = ref({});
  let getProjectData = async (data) => {
    let res = await getProjectMapAndData(data);
    let resEcharts = await EchartsDataXMFB(data);
    XMFBData.value.series[0].data = resEcharts.data;
    XMWHTable.value = res.data;
    if (res.code == 200) {
      projectMapAndData.value = res.data.map((v) => {
        return {
          ...v,
          active: false,
        };
      });
      if (projectMapAndData.value.length > 1) {
        let arr = res.data.sort((a, b) => b.totalInput - a.totalInput);
        stepNum.value.step = arr[0].totalInput - arr[arr.length - 1].totalInput;
        stepNum.value.start = arr[arr.length - 1].totalInput;
      } else {
        stepNum.value.step = 1;
        stepNum.value.start = 1;
      }
    }
  };
  
  let imgFn = (icon) => {
    return `http://${sessionStorage.getItem("backendip")}:8034${icon}`;
  };
  
  let getColor = (item, background) => {
    let startAngle = 0.4; // 角度范围的起始值
    let endAngle = 1; // 角度范围的结束值
    let percent = (endAngle - startAngle) / stepNum.value.step;
  
    let angle = (item.totalInput - stepNum.value.start) * percent + startAngle;
    if (!background) {
      return `hsl(200deg,100%,40%,${angle})`;
    } else {
      return `background:hsl(200deg,100%,40%,${angle})`;
    }
  };
  let getBorderColor = (item) => {
    let startAngle = 120; // 角度范围的起始值
    let endAngle = 360; // 角度范围的结束值
    let percent = (endAngle - startAngle) / stepNum.value.step;
  
    let angle = (item.totalInput - stepNum.value.start) * percent + startAngle;
    return `color:red`;
  };
  let afterDom;
  let afterStlye;
  let afterIndex;
  watch(projectMapAndData, () => {
    console.log(projectMapAndData.value);
    // 修改
    map.clearMap();
    // 修改
    projectMapAndData.value.forEach(function (marker, i) {
      console.log(marker.position,marker)
      let markerData = new AMap.Marker({
        map: map,
        content: `
              <div style="display: flex;
      align-items: center;
      flex-direction: column;position:relative;">
              <div class='tips_ie' style='background-color: white;
      border-radius: 0.4rem;
      transform: translateX(-50%);
      left: 50%;
      padding: 8px;
      font-size: 12px;
     
      position: absolute;
      box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
      text-align: center;
      top: -27px;'>
        <span style='font-weight:800;line-height:15px;white-space: nowrap;color:#0081ff'>项目代号:${marker.projectCode}</span>
       
      
        
      </div>
     <div class='sanjioaxin' style=' 
       margin-left: 4px;
      margin-top: 8px;
      width: 25px;
      height: 25px;
     
     
        '><svg class="icon" style="width: 100%;height: 100%vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5049"><path d="M930 960H318c-16.569 0-30-13.431-30-30V591.528a26.156 26.156 0 0 1 13.632-22.963L601.318 388.1c17.43-9.507 38.682 3.108 38.682 22.963v118.74c0 20.332 22.18 32.89 39.614 22.429l240.771-161.463C937.82 380.308 960 392.866 960 413.198V930c0 16.569-13.431 30-30 30z" fill="#92C8FF" p-id="5050"></path><path d="M317.77 960H96.786c-17.874 0-32.142-14.898-31.371-32.755L96 219.328C96 186.698 124.8 160 160 160h64c34.767 0 63.291 31.218 63.987 58.318 0.017 0.674 0.042 1.347 0.1 2.019l60.966 705.561C350.638 944.237 336.178 960 317.77 960z" fill="#409EFF" p-id="5051"></path><path d="M224 511.5h-64.5c-17.6 0-32-14.4-32-32s14.4-32 32-32H224c17.6 0 32 14.4 32 32s-14.4 32-32 32zM256 735.5h-96.5c-17.6 0-32-14.4-32-32s14.4-32 32-32H256c17.6 0 32 14.4 32 32s-14.4 32-32 32z" fill="#92C8FF" p-id="5052"></path><path d="M191.5 111.5a48 16 0 1 0 96 0 48 16 0 1 0-96 0Z" fill="#92C8FF" p-id="5053"></path><path d="M351.5 95.5a80 32 0 1 0 160 0 80 32 0 1 0-160 0Z" fill="#92C8FF" p-id="5054"></path><path d="M575.5 111.5a112 48 0 1 0 224 0 112 48 0 1 0-224 0Z" fill="#92C8FF" p-id="5055"></path><path d="M864 640c17.6 0 32 14.4 32 32v192c0 17.6-14.4 32-32 32s-32-14.4-32-32V672c0-17.6 14.4-32 32-32zM704 640c17.6 0 32 14.4 32 32v192c0 17.6-14.4 32-32 32s-32-14.4-32-32V672c0-17.6 14.4-32 32-32zM544 640c17.6 0 32 14.4 32 32v192c0 17.6-14.4 32-32 32s-32-14.4-32-32V672c0-17.6 14.4-32 32-32z" fill="#409EFF" p-id="5056"></path></svg></div>
       </div>
    `,
        position: [marker.position[0], marker.position[1]],
        offset: new AMap.Pixel(-20, -20),
      });
  
      markerData.on("mouseover", function (e) {
        afterIndex = e.target.dom.style.zIndex;
        console.log(e.target.dom.style.zIndex);
        e.target.dom.style.zIndex = 999;
        afterStlye = e.target.dom.querySelector(".tips_ie").style;
        afterDom = e.target.dom.querySelector(".tips_ie").innerHTML;
        let HTML = `
       
       <p style='font-weight:800;line-height:15px;'>项目：${marker.projectName}</p>
       <p style='margin-top:10px;line-height:15px;'>地址：${marker.address}</p>
      
        `;
        e.target.dom.querySelector(".tips_ie").innerHTML = HTML;
        e.target.dom.querySelector(".tips_ie").style.top = "";
        e.target.dom.querySelector(".tips_ie").style.bottom = "34px";
        e.target.dom.querySelector(".tips_ie").style.textAlign = "left";
        e.target.dom.querySelector(".tips_ie").style.width = "240px";
      });
  
      markerData.on("mouseout", function (e) {
        e.target.dom.style.zIndex = afterIndex;
        e.target.dom.querySelector(".tips_ie").style.textAlign = "center";
        e.target.dom.querySelector(".tips_ie").style.top = "-27px";
        e.target.dom.querySelector(".tips_ie").style.bottom = "";
        e.target.dom.querySelector(".tips_ie").style.width = "";
        e.target.dom.querySelector(".tips_ie").innerHTML = afterDom;
      });
  
      //构建自定义信息窗体
      let createInfoWindow = (title, content) => {
        let info = document.createElement("div");
        info.innHTML = "custom-info input-card content-window-card";
      };
  
      let infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: createInfoWindow(),
        offset: new AMap.Pixel(-10, -10),
      });
    });
  });
  
  let tableDataHTQD = ref([]);
  
  let getHTQDdATA = async (data) => {
    let res = await allHTQD({ contractNum: data });
    tableDataHTQD.value = res.data;
  };
  
  watch(projectName, () => {
    getProjectData({ projectName: projectName.value });
  });
  
  let projectId = ref("");
  let projectPosition = ref([]);
  let rowClick = (item) => {
    projectMapAndData.value.forEach((v) => {
      v.active = false;
    });
    item.active = true;
    document.querySelector(".left_button_box").style.visibility = "hidden";
    document.querySelector(".left_button_box").style.top = "-20px";
  
    setTimeout(() => {
      document.querySelector(".left_button_box").style.visibility = "visible";
      document.querySelector(".left_button_box").style.top = "0";
      document.querySelector(".left_button_box").style.transition = ".5s";
    }, 200);
    projectId.value = item.projectId;
  
    if (item.lnglat) {
      map.setCenter([item.lnglat[0], item.lnglat[1]]); // 设置地图中心点
  
      map.setZoom(20); // 设置地图层级
    } else {
      projectPosition.value = item.position;
      map.setCenter([item.position[0], item.position[1]]); // 设置地图中心点
  
      map.setZoom(20); // 设置地图层级
    }
  };
  
  let rowClickContract = (item) => {
    map.setCenter([item.lnglat[0], item.lnglat[1]]); // 设置地图中心点
  
    map.setZoom(20); // 设置地图层级
  };
  
  let xzfb_div = ref(false);
  let CJFB_div = ref(false);
  
  let getTreeData = async (data) => {
    let res = await getAllPriject(data);
    if (res.code == 200) {
      setTimeout(() => {
        document.querySelectorAll(".parentNodes").forEach((v) => {
          v.addEventListener("mouseenter", (e) => {
            e.target.querySelector(".button_show2").style.visibility = "visible";
            e.target.querySelector(".button_show").style.visibility = "visible";
          });
          v.addEventListener("mouseleave", (e) => {
            e.target.querySelector(".button_show2").style.visibility = "hidden";
            e.target.querySelector(".button_show").style.visibility = "hidden";
          });
        });
      }, 200);
      dragDataXM.value = res.data;
    }
  };
  
  let createXm = () => {
    // setTimeout(()=>{
  
    //   document.querySelector('.tree_box').style.width = document.querySelector('.white_color').clientWidth + 'px'
  
    //   document.querySelector('.box_show').style.height = (document.querySelector('.tree_box').clientHeight + +10) + 'px'
    //   document.querySelector('.tree_box').style.zIndex = 999
    //   document.querySelector('.tree_box').style.visibility = 'visible'
  
    //   document.querySelector('.tree_box').style.left = document.querySelector('.box_show').getBoundingClientRect().left +'px'
    //   document.querySelector('.tree_box').style.top = document.querySelector('.box_show').getBoundingClientRect().top +'px'
    //  },300)
    // 修改 取消注释
    map.destroy();
  
    init();
  
    RY_div.value = false;
    HT_div.value = false;
    xzfb_div.value = true;
    towPageDrag.value = false;
    getProjectData({ projectName: projectName.value });
    getTreeData({
      username: JSON.parse(sessionStorage.getItem("userInfo"))?.user.name,
    });
  };
  let destroyXm = () => {
    document.querySelector(".tree_box").style.zIndex = -1;
    towPageDrag.value = false;
    xzfb_div.value = false;
    RY_div.value = false;
    HT_div.value = false;
  };
  
  let XMWHTable = ref([]);
  let dialogVisibleYMWH = ref(false);
  let YMWHShowFn = () => {
    dialogVisibleYMWH.value = true;
  };
  
  let dialogVisibleYMWHAdd = ref(false);
  let addProjectItem = () => {
    dialogVisibleYMWHAdd.value = true;
  };
  
  let towPageDrag = ref(false);
  
  let contractTotal = ref(1);
  let contractData = ref([]);
  let getContract = async (data) => {
    let res = await getContractData(data);
    if (res.code === 200) {
      contractData.value = res.data.map((v) => {
        return {
          ...v,
          pj_show: false,
        };
      });
      contractTotal.value = res.total;
    }
  };
  
  let contractMapData = ref([]);
  let getContractMap = async (data) => {
    let res = await getContractMapData(data);
    if (res.code === 200) {
      contractMapData.value = res.data;
      new AMap.Marker({
        map: map,
        content: `
            
     <div class='tips_ie'>
       <div class='sanjioaxin' style=' 
       color: hsl(120deg,100%,40%,1);
      margin-left: 4px;
      margin-top: 2px;
      width: 15px;
      height: 15px;
      border: solid 1px currentColor;
      border-radius: 20px 20px 20px 0;
    background-color: currentColor;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 117px;
      left: 42%; 
        '></div>
      </div>
       
    `,
        position: [projectPosition.value[0], projectPosition.value[1]],
        offset: new AMap.Pixel(-13, -30),
      });
      new AMap.MarkerClusterer(map, res.data, {
        gridSize: 60, // 设置网格像素大小
        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
        renderMarker: _renderMarker, // 自定义非聚合点样式
      });
      setTimeout(() => {}, 2000);
    }
  };
  
  let contractName = ref("");
  let selectProject = ref("");
  
  watch(selectProject, async () => {
    if (selectProject.value) {
      // 地图数据请求  列表数据请求
  
      let tagPotionsData = projectSelectOption.value.filter(
        (v) => v.projectId == selectProject.value
      )[0];
      //  修改 取消注释
      //  map.destroy();
      let data_sea = await getData({ projectId: selectProject.value });
  
      await init();
      vendorMapPageSize.value = 20;
      vendorMapPageNum.value = 1;
      vendorName.value = "";
      let data = prokectMapData.value.filter(
        (v) => v.projectId == selectProject.value
      )[0].position;
  
      new AMap.MarkerClusterer(map, data_sea, {
        gridSize: 60, // 设置网格像素大小
        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
        renderMarker: _renderMarker, // 自定义非聚合点样式
      });
      let markerData = new AMap.Marker({
        map: map,
        zIndex: 15,
        content: `
              <div style="display: flex;
      align-items: center;
      flex-direction: column;position:relative;">
              <div class='tips_ie' style='background-color: white;
      border-radius: 0.4rem;
      transform: translateX(-50%);
      left: 50%;
      padding: 8px;
      font-size: 12px;
     
      position: absolute;
      box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
      text-align: center;
      top: -27px;'>
       <span style='font-weight:800;line-height:15px;white-space: nowrap;color:#0081ff'>项目代号:${tagPotionsData.projectCode}</span>
       
      
        
      </div>
     <div class='sanjioaxin' style=' 
       margin-left: 4px;
      margin-top: 8px;
      width: 25px;
      height: 25px;
     
     
        '><svg class="icon" style="width: 100%;height: 100%vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5049"><path d="M930 960H318c-16.569 0-30-13.431-30-30V591.528a26.156 26.156 0 0 1 13.632-22.963L601.318 388.1c17.43-9.507 38.682 3.108 38.682 22.963v118.74c0 20.332 22.18 32.89 39.614 22.429l240.771-161.463C937.82 380.308 960 392.866 960 413.198V930c0 16.569-13.431 30-30 30z" fill="#92C8FF" p-id="5050"></path><path d="M317.77 960H96.786c-17.874 0-32.142-14.898-31.371-32.755L96 219.328C96 186.698 124.8 160 160 160h64c34.767 0 63.291 31.218 63.987 58.318 0.017 0.674 0.042 1.347 0.1 2.019l60.966 705.561C350.638 944.237 336.178 960 317.77 960z" fill="#409EFF" p-id="5051"></path><path d="M224 511.5h-64.5c-17.6 0-32-14.4-32-32s14.4-32 32-32H224c17.6 0 32 14.4 32 32s-14.4 32-32 32zM256 735.5h-96.5c-17.6 0-32-14.4-32-32s14.4-32 32-32H256c17.6 0 32 14.4 32 32s-14.4 32-32 32z" fill="#92C8FF" p-id="5052"></path><path d="M191.5 111.5a48 16 0 1 0 96 0 48 16 0 1 0-96 0Z" fill="#92C8FF" p-id="5053"></path><path d="M351.5 95.5a80 32 0 1 0 160 0 80 32 0 1 0-160 0Z" fill="#92C8FF" p-id="5054"></path><path d="M575.5 111.5a112 48 0 1 0 224 0 112 48 0 1 0-224 0Z" fill="#92C8FF" p-id="5055"></path><path d="M864 640c17.6 0 32 14.4 32 32v192c0 17.6-14.4 32-32 32s-32-14.4-32-32V672c0-17.6 14.4-32 32-32zM704 640c17.6 0 32 14.4 32 32v192c0 17.6-14.4 32-32 32s-32-14.4-32-32V672c0-17.6 14.4-32 32-32zM544 640c17.6 0 32 14.4 32 32v192c0 17.6-14.4 32-32 32s-32-14.4-32-32V672c0-17.6 14.4-32 32-32z" fill="#409EFF" p-id="5056"></path></svg></div>
       </div>
    `,
        position: [data[0], data[1]],
        offset: new AMap.Pixel(-10, -10),
      });
  
      markerData.on("mouseover", function (e) {
        afterIndex = e.target.dom.style.zIndex;
  
        e.target.dom.style.zIndex = 99;
        afterStlye = e.target.dom.querySelector(".tips_ie").style;
        afterDom = e.target.dom.querySelector(".tips_ie").innerHTML;
        let HTML = `
      
      <p style='font-weight:800;line-height:15px;'>项目：${tagPotionsData.projectName}</p>
      <p style='margin-top:10px;line-height:15px;'>地址：${tagPotionsData.address}</p>
     
       `;
        e.target.dom.querySelector(".tips_ie").innerHTML = HTML;
        e.target.dom.querySelector(".tips_ie").style.top = "";
        e.target.dom.querySelector(".tips_ie").style.bottom = "34px";
        e.target.dom.querySelector(".tips_ie").style.textAlign = "left";
        e.target.dom.querySelector(".tips_ie").style.width = "240px";
      });
  
      markerData.on("mouseout", function (e) {
        e.target.dom.style.zIndex = afterIndex;
        e.target.dom.querySelector(".tips_ie").style.textAlign = "center";
        e.target.dom.querySelector(".tips_ie").style.top = "-27px";
        e.target.dom.querySelector(".tips_ie").style.bottom = "";
        e.target.dom.querySelector(".tips_ie").style.width = "";
        e.target.dom.querySelector(".tips_ie").innerHTML = afterDom;
      });
  
      let res = await getCJData({
        projectId: selectProject.value,
        pageSize: vendorMapPageSize.value,
        pageNum: vendorMapPageNum.value,
        vendorName: vendorName.value,
      });
      CJData.value = res.data.map((v) => {
        return {
          ...v,
          showItem: false,
        };
      });
      vendorMapTotal.value = res.total;
    } else {
      createCJ();
    }
  });
  
  watch(contractName, () => {
    getContract({
      projectId: projectId.value,
      contractName: contractName.value,
      pageNum: contractPageNum.value,
      pageSize: contractPageSize.value,
    });
  });
  
  let XMFBData = ref({
    tooltip: {
      trigger: "item",
    },
    legend: {
      show: false,
    },
    series: [
      {
        label: {
          position: "outside",
        },
        labelLine: {
          show: true,
  
          length: 1,
        },
        name: "项目分布",
        type: "pie",
        radius: ["60%", "95%"],
  
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          fontWeight: 800,
          formatter: "项目数量占比",
          fontSize: 14,
          position: "center",
        },
  
        labelLine: {
          show: true,
        },
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads2" },
        ],
      },
    ],
  });
  
  let dialogVisibleXQ = ref(false);
  let pageNumXQ = ref(1);
  let pageSizeXQ = ref(30);
  let allprojectCodeSelect = ref([])
  let allroleSelect = ref([])
  let  roleSelect  = ref([])
  let XQTable = ref([]);
  let totalXQ = ref(0);
  let RYlOADING = ref(false);
  
  
  watch([workCode,projectCodeSelect,roleSelect], () => {
  
  RYXQShowFn();
  });
  
  let pageNumPerson = ref(1)
   let pageSizePerson = ref(10)
  let personTotalNum = ref(0)
  let personSizeChange23 = (val) => {
    pageSizePerson.value = val
    RYXQShowFn()
  }
  
  let personCurrentChange23 = (val) => {
    pageNumPerson.value = val
    RYXQShowFn()
  }
  
  let RYXQShowFn = async (str) => {
    // XQTable.value = []
    RYlOADING.value = true;
    if (str !== 1) {
      ElNotification({
        title: "请求人员表格数据",
        message: "正在获取人员数据，请稍后",
        type: "warning",
        duration: 1000,
      });
    }
  
  
    let res = await checkAllDataPerson({
      pageNum: pageNumPerson.value,
      pageSize: pageSizePerson.value,
      workCode: workCode.value,
      projectCode:projectCodeSelect.value,
      role:roleSelect.value
    });
  
    if (res.code == 200) {
      personTotalNum.value = res.total
      let TableData = res.data;
      let size = 70;
      dialogVisibleXQ.value = true;
      // forMatterTableArr(TableData,size)
      //  new Promise((res)=>{
      XQTable.value = res.data;
      //  })
      // totalXQ.value = res.total
     
      getallWorkCodeData({});
     
      allprojectCodeSelect.value = [...new Set(res.data.map(v=>v.projectCode))].map(v=>{
        return {
           value:v,
           label:v
        }
      })
  
      allroleSelect.value = [...new Set(res.data.map(v=>v.role))].map(v=>{
        return {
           value:v,
           label:v
        }
      })
      
    }
  };
  
  
  let forMatterTableArr = async (OriginData, size) => {
    let num = Math.ceil(OriginData.length / size);
  
    let asyncFn = () => {
      return new Promise((res) => {
        let data = [...OriginData.splice(0, size)];
        setTimeout(() => {
          res(data);
        }, 200);
      });
    };
  
    for (let i = 0; i < num; i++) {
      let res = await asyncFn();
  
      XQTable.value.push.apply(XQTable.value, res);
    }
  };
  
  watch(HT_div, () => {
    if (HT_div.value) {
      new Promise((resolve) => {
        // 修改 取消注释
        map.destroy();
        console.log(1);
        let full = init();
        if (full) {
          resolve();
        }
      }).then(() => {
        getContract({
          projectId: projectId.value,
          contractName: contractName.value,
          pageNum: contractPageNum.value,
          pageSize: contractPageSize.value,
        });
        getContractMap({
          projectId: projectId.value,
          pageNum: 1,
          pageSize: 999999,
        });
      });
    }
  });
  
  let getCJMap = async () => {
    // 修改 取消注释
    map.destroy();
    console.log(1);
    init();
  
    let data = await getData({ projectId: "" });
  
    new AMap.MarkerClusterer(map, data, {
      gridSize: 60, // 设置网格像素大小
      renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
      renderMarker: _renderMarker, // 自定义非聚合点样式
    });
  };
  
  let vendorName = ref("");
  let CJData = ref([]);
  let projectSelectOption = ref([]);
  let prokectMapData = ref([]);
  
  watch(vendorName, async () => {
    let res = await getCJData({
      projectId: selectProject.value,
      pageSize: vendorMapPageSize.value,
      pageNum: vendorMapPageNum.value,
      vendorName: vendorName.value,
    });
    CJData.value = res.data.map((v) => {
      return {
        ...v,
        showItem: false,
      };
    });
    vendorMapTotal.value = res.total;
  });
  
  let getCJ = async (data) => {
    let res = await getCJData({
      projectId: selectProject.value,
      pageSize: vendorMapPageSize.value,
      pageNum: vendorMapPageNum.value,
      vendorName: vendorName.value,
    });
    let res2 = await getProjectMapAndData({ projectName: "" });
    if (res.code == 200) {
      CJData.value = res.data.map((v) => {
        return {
          ...v,
          showItem: false,
        };
      });
      vendorMapTotal.value = res.total;
      XMWHTable.value = res2.data;
      prokectMapData.value = res2.data;
      projectSelectOption.value = res2.data.map((v) => {
        return {
          label: `${v.projectCode} - ${v.projectName}`,
          value: v.projectId,
  
          ...v,
        };
      });
      copyData.value = [...projectSelectOption.value];
    }
  };
  
  let createCJ = async () => {
    selectProject.value = "";
    vendorMapPageSize.value = 20;
    vendorMapPageNum.value = 1;
    vendorName.value = "";
    getCJMap();
    getCJ();
    getEchartsDataGYS();
    CJFB_div.value = true;
  };
  
  let destroyCJ = () => {
    CJFB_div.value = false;
    typeSelect_s.value = "全部";
  };
  
  let RYFBData = ref([]);
  let personFBTotal = ref(1);
  let getRTFB = async (data) => {
    let res = await getRYFBData(data);
    if (res.code == 200) {
      RYFBData.value = res.data.map((v) => {
        return {
          ...v,
          showItem: false,
        };
      });
      personFBTotal.value = res.total;
    }
  };
  
  let getRTFBMap = async (data) => {
    let res = await getRYFBMapData(data);
    if (res.code == 200) {
      res.data.forEach(function (marker, i) {
        let markerData = new AMap.Marker({
          map: map,
          zIndex: 15,
          content: `
              <div style="display: flex;
      align-items: center;
      flex-direction: column;position:relative;">
              <div class='tips_ie' style='background-color: white;
      border-radius: 0.4rem;
      transform: translateX(-50%);
      left: 50%;
      padding: 8px;
      font-size: 12px;
     
      position: absolute;
      box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
      
      top: -40px;'>
       <span style='font-weight:800;line-height:15px;white-space: nowrap;color:#0081ff'>项目代号:${marker.projectCode}</span>
       <br/>
       <span style='font-weight:800;line-height:15px;white-space: nowrap;color:#0081ff'>参与人数:${marker.totalInput}</span>
      
        
      </div>
     <div class='sanjioaxin' style=' 
       margin-left: 4px;
      margin-top: 8px;
      width: 25px;
      height: 25px;
     
     
        '><svg class="icon" style="width: 100%;height: 100%vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5049"><path d="M930 960H318c-16.569 0-30-13.431-30-30V591.528a26.156 26.156 0 0 1 13.632-22.963L601.318 388.1c17.43-9.507 38.682 3.108 38.682 22.963v118.74c0 20.332 22.18 32.89 39.614 22.429l240.771-161.463C937.82 380.308 960 392.866 960 413.198V930c0 16.569-13.431 30-30 30z" fill="#92C8FF" p-id="5050"></path><path d="M317.77 960H96.786c-17.874 0-32.142-14.898-31.371-32.755L96 219.328C96 186.698 124.8 160 160 160h64c34.767 0 63.291 31.218 63.987 58.318 0.017 0.674 0.042 1.347 0.1 2.019l60.966 705.561C350.638 944.237 336.178 960 317.77 960z" fill="#409EFF" p-id="5051"></path><path d="M224 511.5h-64.5c-17.6 0-32-14.4-32-32s14.4-32 32-32H224c17.6 0 32 14.4 32 32s-14.4 32-32 32zM256 735.5h-96.5c-17.6 0-32-14.4-32-32s14.4-32 32-32H256c17.6 0 32 14.4 32 32s-14.4 32-32 32z" fill="#92C8FF" p-id="5052"></path><path d="M191.5 111.5a48 16 0 1 0 96 0 48 16 0 1 0-96 0Z" fill="#92C8FF" p-id="5053"></path><path d="M351.5 95.5a80 32 0 1 0 160 0 80 32 0 1 0-160 0Z" fill="#92C8FF" p-id="5054"></path><path d="M575.5 111.5a112 48 0 1 0 224 0 112 48 0 1 0-224 0Z" fill="#92C8FF" p-id="5055"></path><path d="M864 640c17.6 0 32 14.4 32 32v192c0 17.6-14.4 32-32 32s-32-14.4-32-32V672c0-17.6 14.4-32 32-32zM704 640c17.6 0 32 14.4 32 32v192c0 17.6-14.4 32-32 32s-32-14.4-32-32V672c0-17.6 14.4-32 32-32zM544 640c17.6 0 32 14.4 32 32v192c0 17.6-14.4 32-32 32s-32-14.4-32-32V672c0-17.6 14.4-32 32-32z" fill="#409EFF" p-id="5056"></path></svg></div>
       </div>
    `,
          position: [marker.position[0], marker.position[1]],
          offset: new AMap.Pixel(-10, -10),
        });
  
        markerData.on("mouseover", function (e) {
          afterIndex = e.target.dom.style.zIndex;
  
          e.target.dom.style.zIndex = 999;
          afterStlye = e.target.dom.querySelector(".tips_ie").style;
          afterDom = e.target.dom.querySelector(".tips_ie").innerHTML;
          let HTML = `
      
      <p style='font-weight:800;line-height:15px;'>项目：${marker.projectName}</p>
      <p style='margin-top:10px;line-height:15px;'>地址：${marker.address}</p>
      <p style='margin-top:10px;line-height:15px;'>项目人数：${marker.totalInput}</p>
       `;
          e.target.dom.querySelector(".tips_ie").innerHTML = HTML;
          e.target.dom.querySelector(".tips_ie").style.top = "";
          e.target.dom.querySelector(".tips_ie").style.bottom = "34px";
          e.target.dom.querySelector(".tips_ie").style.textAlign = "left";
          e.target.dom.querySelector(".tips_ie").style.width = "240px";
        });
  
        markerData.on("mouseout", function (e) {
          e.target.dom.style.zIndex = afterIndex;
          //  e.target.dom.querySelector('.tips_ie').style.textAlign='center'
          e.target.dom.querySelector(".tips_ie").style.top = "-40px";
          e.target.dom.querySelector(".tips_ie").style.bottom = "";
          e.target.dom.querySelector(".tips_ie").style.width = "";
          e.target.dom.querySelector(".tips_ie").innerHTML = afterDom;
        });
      });
    }
  };
  
  let selectData = ref([]);
  let selectDataGW = ref([]);
  let selectDateTime = ref([]);
  let workContent = ref([]);
  let selectData2 = ref([]);
  let applyExplain = ref("");
  let Delperson = (index) => {
    applyTableSubmit.value.splice(index, 1);
    selectData.value.splice(index, 1);
    selectDataGW.value.splice(index, 1);
  };
  
  let Delperson2 = (index, data) => {
    // debugger
    applyTableSubmit2.value = applyTableSubmit2.value.filter(
      (v) => v.id !== data.id
    );
  
    selectData2.value = selectData2.value.filter((v) => v.id !== data.id);
  };
  
  let submitPersonTableData = async (data) => {
    let res = await submitPersonTable(data);
    if (res.code == 200) {
      dialogVisibleRYSQ.value = false;
      getDBSX();
      ElMessage({
        type: "success",
        message: "人员提交成功",
      });
    }
  };
  
  let submitApplyFn = () => {
    if (
      applyTableSubmit.value.every((v) => {
        if (
          typeof v.jobRequire == "number" &&
          typeof v.id == "number" &&
          typeof v.estimatedArrivalTime == "string"
        ) {
          return true;
        } else {
          return false;
        }
      })
    ) {
      submitPersonTableData({
        tableData: applyTableSubmit.value,
        projectId: projectId.value,
      });
    } else {
      ElMessage({
        type: "error",
        message: "请完整填写表格信息",
      });
    }
  };
  
  let submitApplyFn2 = () => {
    dialogVisibleDBSX.value = false;
  };
  
  let closeApplyD = () => {
    applyTableSubmit.value = [
      {
        name: "",
        num: "",
        project: "",
        positionJob: "",
      },
    ];
    applyExplain.value = "";
    selectData.value = [];
    selectDataGW.value = [];
  };
  
  let applyExplain2 = ref("");
  let closeApplyD2 = () => {
    showNEW1.value = true;
    showNEW2.value = false;
    applyTableSubmit2.value = [
      {
        name: "",
        num: "",
        project: "",
        positionJob: "",
      },
    ];
    applyExplain2.value = "";
    selectData2.value = [];
  };
  
  let applyTableSubmit2 = ref([]);
  let addApplyPerson2 = () => {
    applyTableSubmit2.value.push({
      name: "",
      num: "",
      project: "",
      positionJob: "",
    });
  };
  
  watch(
    applyTableSubmit2,
    () => {
      console.log(applyTableSubmit2.value);
    },
    { deep: true }
  );
  
  let addApplyPerson = () => {
    applyTableSubmit.value.push({
      name: "",
      num: "",
      project: "",
      positionJob: "",
    });
  };
  
  let applyTableSubmit = ref([
    { name: "", num: "", project: "", positionJob: "" },
  ]);
  
  let handleSelectChange = (val, index, data) => {
    nextTick(() => {
      applyTableSubmit.value[index] = {
        ...data,
        ...val,
      };
    });
  };
  
  let dialogVisibleYMWHEdit = ref(false);
  let editProject = (item) => {
    formEditProject.value = { ...item };
    dialogVisibleYMWHEdit.value = true;
  };
  
  let formEditProject = ref({
    projectCode: "",
    projectName: "",
    address: "",
    state: "",
  });
  
  let formAddProject = ref({
    projectCode: "",
    projectName: "",
    address: "",
    state: "",
  });
  
  let formEditProjectRef = ref("");
  let onSubmitEdit = async () => {
    await formEditProjectRef.value.validate((valid, fields) => {
      if (valid) {
        submitEditProject(formEditProject.value);
      } else {
        console.log("error submit!", fields);
      }
    });
  };
  
  let onSubmitAdd = async () => {
    await formAddProjectRef.value.validate((valid, fields) => {
      if (valid) {
        submitAddProject(formAddProject.value);
      } else {
        console.log("error submit!", fields);
      }
    });
  };
  
  let submitAddProject = async (data) => {
    let res = await submitAddProjectData(data);
    if (res.code == 200) {
      dialogVisibleYMWHAdd.value = false;
      ElMessage({
        type: "success",
        message: "添加成功",
      });
      getProjectData({ projectName: projectName.value });
      getTreeData({
        username: JSON.parse(sessionStorage.getItem("userInfo"))?.user.name,
      });
    } else {
      ElMessage({
        type: "error",
        message: res.msg,
      });
    }
  };
  
  let DelProject = async (data) => {
    let res = await DelProjectData(data);
    if (res.code == 200) {
      getProjectData({ projectName: projectName.value });
      getTreeData({
        username: JSON.parse(sessionStorage.getItem("userInfo"))?.user.name,
      });
      ElMessage({
        type: "success",
        message: "修改成功",
      });
    }
  };
  
  let submitEditProject = async (data) => {
    let res = await submitEditProjectData(data);
    if (res.code == 200) {
      dialogVisibleYMWHEdit.value = false;
      ElMessage({
        type: "success",
        message: "修改成功",
      });
      getProjectData({ projectName: projectName.value });
      getTreeData({
        username: JSON.parse(sessionStorage.getItem("userInfo"))?.user.name,
      });
    } else {
      ElMessage({
        type: "success",
        message: res.msg,
      });
    }
  };
  
  let formAddProjectRef = ref("");
  let BeforeAddProjectClose = () => {
    formAddProjectRef.value.resetFields();
  };
  
  let BeforeEditProjectClose = () => {
    formEditProjectRef.value.resetFields();
  };
  
  let rulesEditProject = ref({
    projectCode: [{ required: true, message: "请输入项目代号", trigger: "blur" }],
    projectName: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
    address: [{ required: true, message: "请输入项目地址", trigger: "blur" }],
    state: [{ required: true, message: "请选择项目状态", trigger: "blur" }],
  });
  
  let handleSelectChangeGW = (val, index, data) => {
    data["jobRequire"] = val;
  };
  
  let click_RRR = (item, data) => {
    data.forEach((v) => {
      v.checked = v.title === item.title;
    });
  
    item.Fn();
  };
  
  let handleSelectChangeDate = (val, index, data) => {
    data["estimatedArrivalTime"] = val;
  };
  
  let handleSelectChangeWork = (val, index, data) => {
    data["workContent"] = val;
  };
  
  let handleSelectChange2 = (val, index) => {
    nextTick(() => {
      applyTableSubmit2.value[index] = {
        ...val,
      };
    });
  };
  
  let selectTableApply = ref({});
  
  let select_apply = ref("");
  
  let applyTableOptions = ref([]);
  let RYSQShowFn = async () => {
    let res = await applyPersonData({ projectId: projectId.value });
    if (res.code == 200) {
      applyTableOptions.value = res.data.map((v, i) => {
        return {
          ...v,
        };
      });
  
      dialogVisibleRYSQ.value = true;
    }
  };
  
  let createRYFB = () => {
    new Promise((resolve) => {
      // 修改 取消注释
      map.destroy();
      console.log(1);
      let full = init();
      if (full) {
        resolve();
      }
    }).then(() => {
      getRTFB({
        pageNum: 0,
        personName: personFBName.value,
        pageSize: -1,
      });
      getRTFBMap({ projectName: "" });
      getEchartsDataRYFBData();
      RYFB_div.value = true;
    });
  };
  
  let getEchartsDataRYFBData = async () => {
    let res = await EchartsDataREFB({});
    if (res.code == 200) {
      RYData.value.series[0].data = res.data;
    }
  };
  
  let destroyRYFB = () => {
    RYFB_div.value = false;
  };
  
  let RYFB_div = ref(false);
  
  let showBox = ref([]);
  
  watch(
    showBox,
    () => {
      console.log(showBox.value);
      if (showBox.value.length > 0) {
        showBox.value = [];
      } else {
      }
    },
    { deep: true, immediate: true }
  );
  
  let getDataS = async (str) => {
    if (str === "项目分布") {
      showBox.value.push("xzfb_div");
      createXm();
      destroyCJ();
      destroyRYFB();
    } else if (str === "供应商分布") {
      showBox.value.push("CJFB_div");
      destroyXm();
      destroyRYFB();
      createCJ();
    } else if (str === "人员分布") {
      showBox.value.push("RYFB_div");
      destroyCJ();
      destroyXm();
      createRYFB();
    } else if (str === "待办事项") {
      dialogVisibleDBSX.value = true;
      getDBSX();
    }
  };
  
  let getDBSX = async () => {
    let res_3 = await applyPersonHistory({});
  
    let res = await applyPersonDBFN({
      username: JSON.parse(sessionStorage.getItem("userInfo"))?.user.name,
      type: 0,
    });
    let res_2 = await applyProcess({
      pageNum: 0,
      pageSize: -1,
      selectId: selectId.value,
    });
    if (res.code == 200) {
      applyTableSubmit3.value = res_3.data;
      showType.value = res.type;
      applyTableSubmit2.value = res.data;
      applyTableProcess.value = res_2.data;
      SPtotalPage.value = res_2.total;
    }
  };
  
  let applyTableData = ref([]);
  
  let DBState = ref("");
  // let createDBSX =async () => {
  
  //   let res = await applySubmit()
  //   if(res.code == 200){
  //     applyTableData.value = res.data
  //     DBState.value = res.data.length
  //   }
  // }
  let isManager = ref("");
  let personData = ref([]);
  let getPersonDataData = async (data) => {
    let res = await getPersonData(data);
    if (res.code == 200) {
      personData.value = res.data;
      personTotal.value = res.total;
      isManager.value = res.isManager;
    }
  };
  
  let showItem_box = (item, data) => {
    data.forEach((v) => {
      if (v.phone == item.phone && item.showItem) {
        v.showItem = true;
      } else {
        v.showItem = false;
      }
    });
    item.showItem = !item.showItem;
  };
  
  let getBottomDataS = async (data) => {
    let res = await getCJBottomData(data);
    HistoryArr.value = res.data;
  };
  
  let HistoryArr = ref([]);
  
  let showItem_box2 = (item, data) => {
    getBottomDataS({ vendorName: item.community });
    data.forEach((v) => {
      if (v.community == item.community && item.showItem) {
        v.showItem = true;
      } else {
        v.showItem = false;
      }
    });
    item.showItem = !item.showItem;
  };
  
  let changeData = async (data, item) => {
    console.log(data, item);
    if (data == "在现场") {
      let res = await changeState({
        userId: item.userId,
        onSite: 1,
        projectId: projectId.value,
      });
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "切换成功",
        });
        getPersonDataData({
          projectId: projectId.value,
          name: personName.value,
          pageNum: 0,
          pageSize: -1,
        });
      }
    } else {
      let res = await changeState({
        userId: item.userId,
        onSite: 0,
        projectId: projectId.value,
      });
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "切换成功",
        });
        getPersonDataData({
          projectId: projectId.value,
          name: personName.value,
          pageNum: 0,
          pageSize: -1,
        });
      }
    }
  };
  
  let personPageNum = ref(1);
  let personPageSize = ref(20);
  let personTotal = ref(1);
  watch(RY_div, () => {
    if (RY_div.value) {
      getPersonDataData({
        projectId: projectId.value,
        name: personName.value,
        pageNum: 0,
        pageSize: -1,
      });
    }
  });
  </script>
  
  <style scoped lang="less">
  .filter_item {
    display: flex;
    align-items: center;
    span {
      margin-right: 5px;
    }
  }
  .header_icon {
    font-size: 18px;
    font-weight: bold;
    padding: 10px 5px;
    background-color: #eee;
    display: flex;
    align-items: center;
    position: relative;
    .button {
      position: absolute;
      top: 8px;
      font-size: 14px;
      right: 20px;
    }
  }
  
  .res_cricle {
    border-radius: 50%;
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: red;
    top: 0px;
    right: 7px;
  }
  
  .button_s:hover {
    color: white;
    background: #79bbff;
  }
  .margin_top_14 {
    margin-top: 40px;
  }
  .button_s {
    cursor: pointer;
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 10px 20px;
    font-size: 11px;
  }
  .top_button {
    display: flex;
  
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
  
    align-items: center;
  }
  
  .top_button2 {
    display: flex;
  
    position: absolute;
    top: 20px;
    left: 250px;
    padding: 5px;
    background: white;
    border-radius: 10px;
  }
  .pane_table {
    margin-top: 20px;
  }
  .pane_title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .markerClass {
    background-color: #c0e5dfa5;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  #map {
    position: relative;
    width: 100%;
    height: calc(100vh - 6rem);
  }
  
  .person_pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
  }
  .amap-marker-label {
    position: absolute;
    z-index: 2;
    border: none;
    background-color: #ffffff;
    white-space: nowrap;
    cursor: default;
    padding: 4px;
    font-size: 14px;
    line-height: 19px;
    color: #097a7a;
  }
  
  html {
    font-size: 12px;
  }
  .amap-copyright {
    box-sizing: content-box;
  }
  * {
    box-sizing: border-box;
  }
  .input-textarea {
    color: grey;
    height: 8em;
    overflow: auto;
    border-radius: 0.4rem;
  
    margin-bottom: 1rem;
  }
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    line-height: 1.5;
    font-weight: 300;
    color: #111213;
  }
  
  hr {
    margin: 0.5rem 0;
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  p {
    margin-top: 0;
    margin-bottom: 0;
  }
  
  label {
    display: inline-block;
    margin-bottom: 0.4rem;
  }
  
  label,
  .btn {
    margin-left: 0;
    font-size: 1rem;
  }
  
  button,
  input,
  select {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    overflow: visible;
    text-transform: none;
  }
  
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner,
  button::-moz-focus-inner {
    padding: 0;
    border-style: none;
  }
  
  input[type="checkbox"],
  input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0 0.5rem 0 0;
  }
  
  h4 {
    font-family: inherit;
    line-height: 1.8;
    font-weight: 300;
    color: inherit;
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
  }
  .box_show {
    background: white;
  }
  .btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
      border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    background-color: transparent;
    background-image: none;
    color: #25a5f7;
    border-color: #25a5f7;
    padding: 0.25rem 0.5rem;
    line-height: 1.5;
    border-radius: 1rem;
    -webkit-appearance: button;
    cursor: pointer;
  }
  
  .btn:hover {
    color: #fff;
    background-color: #25a5f7;
    border-color: #25a5f7;
  }
  
  .btn:hover {
    text-decoration: none;
  }
  
  .input-item {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 3rem;
    justify-content: flex-end;
  }
  
  .vue3-resize-drag22 {
    border-radius: 5px 5px 0 0;
    padding: 10px;
    background: #0081ff;
    color: white;
    pointer-events: none;
    font-size: 15px;
  }
  
  .img_box {
    border-radius: 10px;
    position: relative;
    width: 50px;
    height: 50px;
    overflow: hidden;
    margin-right: 10px;
    img {
      width: 100%;
    }
    .icon_state {
      position: absolute;
      bottom: 0px;
      right: 0px;
    }
  }
  .flexsim_s {
    display: flex;
    align-items: center;
    padding-left: 17px !important;
  }
  
  .manage2 span:nth-child(2) {
    color: #343232e3;
  }
  
  .border_color {
    border: 1px solid rgba(0, 170, 204, 0.698);
  }
  
  .GSS_select {
    position: absolute;
    z-index: 99;
  }
  
  .xm_fb {
    width: 100%;
    padding: 10px;
    position: relative;
    background: white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
    .left_button_box {
      visibility: hidden;
      left: -62px;
      top: -20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: absolute;
      .buttons {
        margin-bottom: 10px;
      }
    }
    .showitem {
      top: 0px;
      visibility: visible;
    }
  }
  .white_color {
    width: 100%;
    background: white;
    padding: 5px;
  }
  .item_2 {
    margin-top: 10px;
    position: relative;
    padding-left: 15px;
    padding: 10px;
    border-bottom: 1px dashed #ccc;
    .title {
      font-weight: bold;
      font-size: 12px;
    }
    .address {
      line-height: 17px;
      margin-top: 6px;
      font-size: 12px;
    }
  
    .div1 span:nth-of-type(1) {
      color: #0370ca;
    }
    .div2 span:nth-of-type(1) {
      color: #0370ca;
    }
  
    .manage223 span:nth-of-type(1) {
      color: #0370ca;
    }
    .iphone_num_color {
      color: #0370ca;
    }
  
    .manage {
      margin-top: 10px;
      font-size: 11px;
      color: #666;
    }
    .manage2 {
      font-size: 11px;
    }
    .manage223 {
      font-size: 11px;
      display: flex;
      // justify-content: space-between;
    }
  }
  
  .div1 {
    width: 100px;
    margin-right: 39px;
  }
  .div1 span:nth-child(2) {
    color: #343232e3;
  }
  
  .item_2 {
    .new_manage {
      margin-top: 6px;
    }
    .new_title,
    .new_colors_my,
    .new_adress {
      color: #0370ca;
    }
  }
  
  .line_after {
    position: absolute;
    height: 102.8%;
    width: 5px;
    background: #0081ff;
    left: 0px;
    top: -2px;
  }
  
  .state_box {
    position: absolute;
    padding: 5px 4px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 11px;
    top: 5px;
  }
  
  .state_box_cir {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    top: 14px;
    right: 56px;
  
    background: red;
  }
  
  .red_user {
    color: #67c23a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  ._user {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .tips_ie {
    position: relative;
  }
  
  .sanjioaxin {
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid #333;
    width: 0;
    height: 0;
  }
  
  .search_input_s {
    /deep/ .el-select {
      width: 100%;
    }
  }
  .input-item:last-child {
    margin-bottom: 0;
  }
  
  .input-item > select,
  .input-item > input[type="text"],
  .input-item > input[type="date"] {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
  }
  
  .input-item > select:not(:last-child),
  .input-item > input[type="text"]:not(:last-child),
  .input-item > input[type="date"]:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  
  .input-item > select:not(:first-child),
  .input-item > input[type="text"]:not(:first-child),
  .input-item > input[type="date"]:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  
  .input-item-prepend {
    margin-right: -1px;
  }
  
  .input-item-text,
  input[type="text"],
  input[type="date"],
  select {
    height: calc(2.2rem + 2px);
  }
  
  .input-item-text {
    width: 6rem;
    text-align: justify;
    padding: 0.4rem 0.7rem;
    display: inline-block;
    text-justify: distribute-all-lines;
    /*ie6-8*/
    text-align-last: justify;
    /* ie9*/
    -moz-text-align-last: justify;
    /*ff*/
    -webkit-text-align-last: justify;
    /*chrome 20+*/
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
  
    border-radius: 0.25rem;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
  
  .amap_lib_placeSearch_list li {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .input-item-text input[type="checkbox"],
  .input-item-text input[type="radio"] {
    margin-top: 0;
  }
  
  .input-text {
    line-height: 2rem;
    margin-right: 2rem;
    font-size: 18px;
  }
  
  .info hr {
    margin-right: 0;
    margin-left: 0;
    border-top-color: grey;
  }
  
  .info {
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
    position: fixed;
    top: 1rem;
    background-color: white;
    width: auto;
    min-width: 22rem;
    border-width: 0;
    right: 1rem;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  }
  
  .code {
    left: 1.5rem;
    right: 1.5rem;
    top: 1.5rem;
    bottom: 1.5rem;
    overflow: auto;
    margin-bottom: 0rem;
  }
  
  .code .btn {
    top: 1rem;
    position: absolute;
    right: 1rem;
  }
  
  .code .result {
    border-radius: 0.5rem;
    padding: 1rem;
    bottom: 1rem;
    position: absolute;
    top: 5.5rem;
    right: 1rem;
    left: 1rem;
    overflow: auto;
  }
  
  .code .status {
    color: #80adff;
    display: inline-block;
    font-size: 14px;
  }
  
  .code h4 {
    display: inline-block;
    max-width: 20rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
  }
  
  select,
  input[type="text"],
  input[type="date"] {
    display: inline-block;
    width: 100%;
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
    line-height: 1.5;
    color: #495057;
    vertical-align: middle;
    background: #fff
      url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
      no-repeat right 0.75rem center;
    background-size: 8px 10px;
  
    border-radius: 0.25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  
  input[type="text"],
  input[type="date"] {
    background: #fff;
    padding: 0.375rem 0.75rem;
  }
  
  select:focus,
  input[type="text"]:focus,
  input[type="date"]:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.1rem rgba(128, 189, 255, 0.1);
  }
  
  /deep/ .amap-copyright {
    display: none !important;
  }
  /deep/ .amap-logo {
    display: none !important;
  }
  
  .height223 {
    height: 223px;
  }
  .height247 {
    height: 247px;
  }
  .btn:focus {
    outline: 0;
    box-shadow: none;
  }
  
  .bottom_back_button {
    position: absolute;
    bottom: 20px;
    left: 20px;
    padding: 10px 20px;
    background: white;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
  }
  
  .bottom_back_button:hover {
    color: white;
    background: #79bbff;
    transition: 0.3s;
  }
  
  select:focus::-ms-value,
  input[type="text"]:focus::-ms-value,
  input[type="date"]:focus::-ms-value {
    color: #495057;
    background-color: #fff;
  }
  
  /* native toastr */
  .native-toast {
    position: fixed;
    background-color: rgba(50, 50, 50, 0.8);
    border-radius: 33px;
    color: white;
    left: 50%;
    text-align: center;
    padding: 6px 12px;
    opacity: 0;
    z-index: 99999;
    transition: transform 0.25s, opacity 0.25s, top 0.25s;
    box-sizing: border-box;
  }
  
  .tree_box {
    width: 300px;
  
    position: fixed;
    visibility: hidden;
    .oversa {
      background: rgba(0, 0, 0, 0.4);
      border-bottom-right-radius: 75px;
      border-bottom-left-radius: 75px;
      pointer-events: none;
      position: absolute;
      top: 0px;
      left: 0;
      width: 100%;
      height: 20%;
      display: none;
    }
  
    .oversa2 {
      display: none;
      background-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1),
        rgba(0, 0, 0, 0.4)
      );
      // background: rgba(0, 0, 0, 0.4);
      border-top-right-radius: 75px;
      border-top-left-radius: 75px;
      pointer-events: none;
      position: absolute;
      bottom: 0px;
      left: 0;
      width: 100%;
      height: 20%;
    }
  }
  .native-toast-bottom {
    bottom: 50px;
    -ms-transform: translateX(-50%) translateY(50px);
    transform: translateX(-50%) translateY(50px);
  }
  
  .native-toast-bottom.native-toast-shown {
    opacity: 1;
    -ms-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0);
  }
  
  .native-toast-bottom.native-toast-edge {
    bottom: 0;
  }
  
  .pagination_page {
    margin-top: 20px;
  }
  .native-toast-top {
    top: 50px;
    -ms-transform: translateX(-50%) translateY(-50px);
    transform: translateX(-50%) translateY(-50px);
  }
  
  .native-toast-top.native-toast-shown {
    opacity: 1;
    -ms-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0);
  }
  
  .native-toast-top.native-toast-edge {
    top: 0;
  }
  
  .native-toast-center {
    top: 0;
    -ms-transform: translateX(-50%) translateY(-50px);
    transform: translateX(-50%) translateY(-50px);
  }
  
  .native-toast-center.native-toast-shown {
    opacity: 1;
    top: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  
  .boder_new_css {
    border-bottom: none;
    border: 1px dashed #ccc;
    border-left: none;
  }
  
  .native-toast-edge {
    border-radius: 0;
    width: 100%;
    text-align: left;
  }
  
  @media screen and (min-width: 40rem) {
    .native-toast:not(.native-toast-edge) {
      max-width: 18rem;
    }
  }
  
  /*
    max-width does not seem to work in small screen?
  */
  
  /*@media screen and (max-width: 768px) {
    .native-toast:not(.native-toast-edge) {
      max-width: 400px;
    }
  }
  
  @media screen and (max-width: 468px) {
    .native-toast:not(.native-toast-edge) {
      max-width: 300px;
    }
  }*/
  
  /* types */
  
  .poi-title {
    margin-bottom: 10px;
    font-weight: bold;
  }
  
  .box_items {
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    justify-content: center;
    span {
      margin-top: 15px;
      font-size: 13px;
      font-weight: bold;
      display: block;
      color: #343232e3;
    }
  }
  
  .RYWH {
  }
  .native-toast-error {
    background-color: #d92727;
    color: white;
  }
  
  .native-toast-success {
    background-color: #62a465;
    color: white;
  }
  
  .native-toast-warning {
    background-color: #fdaf17;
    color: white;
  }
  
  .native-toast-info {
    background-color: #5060ba;
    color: white;
  }
  
  .project_xms {
    height: 25px;
    white-space: nowrap;
  
    overflow: hidden;
  
    text-overflow: ellipsis;
  }
  
  .custom-tree-node_s {
    display: flex;
    align-items: center;
    width: 90%;
    justify-content: space-between;
  }
  
  [class^="native-toast-icon-"] {
    vertical-align: middle;
    margin-right: 8px;
  }
  
  [class^="native-toast-icon-"] svg {
    width: 16px;
    height: 16px;
  }
  
  .input-card {
    width: 32rem;
    z-index: 170;
    color: #fff;
    background-color: #304156;
    padding-bottom: 15px;
  }
  
  .input-card .btn {
    margin-right: 0.8rem;
  }
  
  .total_apply {
    position: relative;
    .button_setion_s {
      display: flex;
      align-items: center;
    }
    .button_items {
      display: flex;
      align-items: center;
      background: #eee;
      padding: 7px 15px;
      font-size: 15px;
      font-weight: bold;
    }
    .active {
      color: #0081ff;
      // background: #0081ff;
    }
  }
  
  .input-card .btn:last-child {
    margin-right: 0;
  }
  .input-text {
    font-size: 30x;
  }
  label,
  .btn {
    margin-left: 0;
    font-size: 1.6rem;
  }
  .input-item {
    margin-top: 12px;
  }
  
  .input-cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border-radius: 0.25rem;
    width: 22rem;
    border-width: 0;
    border-radius: 0.4rem;
    position: fixed;
    top: 5rem;
    opacity: 0.85;
    left: 20rem;
    -ms-flex: 1 1 auto;
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    padding: 0.75rem 1.25rem;
  }
  
  .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    font-size: 1.5em;
    color: #cfe2f7;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  select,
  input[type="text"],
  input[type="date"] {
    color: #45b2f7;
  }
  .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    font-size: 1.5em;
    color: #4f5d6f;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .el-input--suffix .el-input__inner {
    padding-right: 30px;
    width: 280px;
    height: 43px;
  }
  .el-form-item {
    margin-bottom: 7px;
    margin-top: 7px;
  }
  
  .paneC {
    position: absolute;
    left: 64%;
    top: 20px;
    padding: 20px;
    background: white;
    z-index: 999;
  }
  .app-container {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0px;
  }
  
  .cartd_item {
    display: flex;
    align-items: center;
    border-radius: 10px;
    background: #eee;
    justify-content: center;
    padding: 7px 8px;
  }
  .active_class_item {
    color: white;
    font-weight: bold;
    background: #0081ff;
  }
  
  .content_s {
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0px;
  }
  
  #pane {
    position: relative;
  
    width: 100%;
  }
  .amap_lib_placeSearch {
    border-radius: 2px;
    padding: 5px 10px 2px;
  }
  .amap_lib_placeSearch {
    font-family: Microsoft Yahei, Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #565656;
    font-size: 12px;
    line-height: 22px;
    word-wrap: break-word;
    background-color: #fff;
  
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    min-width: 270px;
  }
  .amap_lib_placeSearch_list {
    background: #fff none repeat scroll 0 0;
  }
  .amap_lib_placeSearch ol,
  .amap_lib_placeSearch ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
  }
  .amap_lib_placeSearch .poibox {
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    padding: 10px 5px;
    position: relative;
    min-height: 35px;
  }
  .amap_lib_placeSearch_pic {
    width: 46px;
    height: 46px;
    float: left;
    margin: 4px 10px 0 0;
  }
  .amap_lib_placeSearch_pic img {
    width: 46px;
    height: 46px;
  }
  .amap_lib_placeSearch .poibox .poi-title {
    margin-left: 25px;
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
  }
  .amap_lib_placeSearch .poibox .poi-title .poi-name {
    max-width: 160px;
    display: inline-block;
  }
  .amap_lib_placeSearch .amap-ellipsis {
    max-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .amap_lib_placeSearch .poibox .poi-info {
    word-break: break-all;
    margin: 0 0 0 25px;
    overflow: hidden;
  }
  .amap_lib_placeSearch .poibox .poi-info p {
    color: #999;
    font-family: Tahoma;
    line-height: 20px;
  }
  .amap_lib_placeSearch .amap-ellipsis {
    max-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
  }
  .amap_lib_placeSearch p {
    margin: 0;
  }
  
  .img_ls {
    width: 100%;
    height: 150px;
  }
  
  .custion {
    /deep/ .el-switch {
      top: -5px;
      left: 24px;
    }
  }
  
  .button_constion {
    position: absolute;
    right: 15px;
    top: -29px;
  }
  
  .button_show {
    visibility: hidden;
  }
  .button_show2 {
    visibility: hidden;
  }
  .boder_show_custor {
    border-top: 1px dashed #ccc;
    padding-top: 10px;
  }
  .add_button {
    color: #0370ca !important;
  }
  .add_button:hover {
    color: #4faffd !important;
  }
  
  .addClass_ground {
    display: flex;
    justify-content: flex-end;
  }
  
  .new_stlle_G {
    display: flex;
    width: 100%;
    .new_span_style_cs {
      width: 71%;
      line-height: 14px;
    }
  }
  .vue3-resize-drag22 {
    box-shadow: rgba(0, 0, 0, 0.45) 0px -2px 15px;
  }
  .detail_RYXX {
    padding: 0 10px;
    padding-left: 20px;
    margin-top: 20px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content:  space-between;
    .project_item {
      margin-bottom: 5px;
    }
    .projec_cas {
      width: 66%;
      .title {
        color: #0370ca;
        margin-bottom: 10px;
        font-weight: bold;
      }
    }
    .projec_WC {
      width: 30%;
      .title {
        color: #0370ca;
        margin-bottom: 10px;
        font-weight: bold;
      }
    }
  }
  
  .dialogFade-enter {
    opacity: 0;
  }
  /* 过程 */
  .dialogFade-enter-active {
    transform: translateX(-100px);
    transition: all 0.2s;
  }
  /* 结束 */
  .dialogFade-enter-to {
    transform: translateX(0px);
    opacity: 1;
  }
  .dialogFade-leave-active {
    transition: 0s;
  }
  .active {
    color: rgb(24, 144, 255);
  }
  .show_flase_title {
    color: #0081ff;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    margin: 10px 0;
  }
  .tab_card {
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .cartd_item {
    font-size: 11px;
  }
  
  .pj_box {
    position: relative;
    display: flex;
    align-items: center;
  }
  .GSS_select {
    top: 7px;
    right: 8px;
  }
  
  .table_sd {
    /deep/ .el-table__cell {
      padding: 2px 0;
    }
  }
  
  .table_HTQD {
    /deep/ .el-table__cell {
      padding: 2px 0;
      font-size: 11px;
    }
  }
  </style>
  